文章/答案/技术大牛

发布

社区首页 >问答首页 >在jQuery中的多个li之间插入HTML元素

问在jQuery中的多个li之间插入HTML元素
EN

Stack Overflow用户

提问于 2018-08-17 21:46:29

回答 2查看 33关注 0票数 0

我有几个div，我试着用append in jQuery在所有3个元素周围添加更多：

我有：

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>

我试着插入其他类似的div：

<div class="container-1">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>
<div class="container-2">
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>
<div class="container-3">
    <div>7</div>
    <div>8</div>
    <div>9</div>
</div>

我尝试了附加功能，但它没有工作，我不知道是否可能？然后，我知道我需要一个for循环来完成这个任务。谢谢你的帮助。

javascript

jquery

html

append

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-08-17 21:50:53

您可以遍历现有的div并将它们附加到容器中。

在迭代中，您可以跟踪当前容器。如果容器的内部元素计数超过2，则创建一个新容器。

这将一直持续到所有的div都被移动到容器为止。

var container, count = 0;

$('div').each(function() {
  if (!container || container.find('div').length > 2) {
    container = $(`<div class="container-${++count}"></div>`).appendTo('body');
  }
  
  $(this).appendTo(container);
});

div[class^=container] {
  border: 1px dashed darkgray;
  padding: 5px;
  margin-bottom: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>

票数 0

Stack Overflow用户

发布于 2018-08-17 22:01:42

你可以用容器div包围所有的div，比如div和id = 'container'，然后你可以遍历所有的div，然后获得每个元素的outerHTML，并将每个元素的三个div分组到一个单独的div中。

var nHTML = '', finalHTML = '', i=1;;
$('#container div').each(function(index, elem){
  if(index == 0 || index % 3 !==0){
    nHTML += elem.outerHTML;
  }
  else{
    finalHTML += '<div class="container-'+i+'">'+nHTML+'</div>';
    i++;
    nHTML = elem.outerHTML;
  }
});
$('#container').html(finalHTML);

.container-1{
  color: green;
}
.container-2{
  color: red;
}
.container-3{
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='container'>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
<div>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/51896825

复制

相似问题

问在jQuery中的多个li之间插入HTML元素
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在jQuery中的多个li之间插入HTML元素EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在jQuery中的多个li之间插入HTML元素
EN