Question

我有这个代码，我想在元素存在的行之后插入div。我能够为行中的最后一个元素执行此操作。问题是我无法确定如何对同一行中的其余元素进行操作

HTML

<div class="wrap">
  <div class="info"></div>
    <div class="info"></div>
    <div class="info"></div>
    <div class="info"></div>
    <div class="info"></div>
    <div class="info"></div>
    <div class="info"></div>
    <div class="info"></div>
    <div class="info"></div>
    <div class="info"></div>
    <div class="info"></div>
    <div class="info"></div>
    <div class="info"></div>
    <div class="info"></div>

    <div class="newdiv"></div>

CSS

.wrap{border:1px solid #000;width:630px}
.info{border:1px solid red; width:180px;float:left;margin-left:20px;height:100px;margin-top:20px}
.newdiv{width:100%;height:100px;background:green;display:none;float:left}
.active{background:brown}

Jquery的

$('.info').on('click',function(){
  $('.info').removeClass('active');
  $(this).addClass('active');

  if(($(this).index('.info')+1)%3===0)
  {
    $('.newdiv').insertAfter($(this)).show();
  }

});

演示http://jsbin.com/AvERUpU/1/

Answer 1

计算第3个元素的索引：

  var index = $(this).index('.info');
  var afterIndex = index - index % 3 + 2;
  var all = $('.info');
  if (afterIndex >= all.length) {
     afterIndex = all.length - 1;
  }
  $('.newdiv').insertAfter(all.eq(afterIndex)).show();

http://jsbin.com/AvERUpU/4/

Answer 2

只是一个简单的数学。

试试这个，

$('.info').on('click',function(){
  $('.info').removeClass('active');
  $(this).addClass('active'); 
  var xIndexAdded = $(this).index('.info') + (2 - ($(this).index('.info')%3));     
  $('.newdiv')
     .insertAfter(($('.info').eq((xIndexAdded>=$('.info').length)?$('.info').length-1:xIndexAdded))) 
     .show();  
});

获取同一行中的最后一个元素

2 个答案:

DEMO