Question

我有下面的代码，其中要求是来自第二组的div（按顺序）应该放在使用jquery的第一组的每个第3个子项之后。

<div class="row">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>  
</div>

<div class="catalog">
  <div class="data"></div>
  <div class="data"></div>
  <div class="data"></div>
</div>

期望的输出：

<div class="row">
 <div class="item"></div>
 <div class="item"></div>
 <div class="item"></div>
    <div class="data"></div>
 <div class="item"></div>
 <div class="item"></div>
 <div class="item"></div>
    <div class="data"></div>
 <div class="item"></div>
    <div class="data"></div>    
</div>

我尝试过以下代码：

  $('.catalog').each(function(){
    var $divs = $(this).children('div');
      for(var i=0; i<$divs.length; i+=3){
        $('.row > div:nth-child(3n)').after($divs[i]);
      }                         
   })

此代码附加了目录下的第一个div而不是计数中剩余的div。

Answer 1

您的代码有点复杂而不是您想要的。使用这个jquery：

var i = 3;

$('.catalog div').each(function(index, el){
    var rowDivCounter = $('.row > div').length;
    if(i>=rowDivCounter){
        $('.row').append($(el));
    }
    else{
        $('.row > div:nth-child('+ i +')').after($(el));                
        i = i + 3 + index + 1;
    }

});

你需要计算这一点。第一个元素是3.你想要它之后的目录div，然后你需要6.但是代码已经插入了目录div所以7.所以需要添加循环（index + 1）来获得它。等等。

在另一个div的另一个div的每个第3个孩子之后插入div的每个孩子

1 个答案: