在jQuery中的倍数li之间插入HTML元素

Question

我有几个div，我尝试在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循环。 谢谢您的帮助。

Answer 1

您可以遍历现有的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> 

Answer 2

您可以用容器div包围所有这些div ，例如用id = 'container'表示div ，然后可以遍历所有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>