Question

我正在寻找在每三个div标签后放置一个span标签的解决方案。

HTML

<div class="grid_15">
   <div class="grid_5">
      <p>Sun</p>
      <div>
         <div class="suggest nudge-up"><span class="form-content-left">All Hours</span><span class="clear"></span></div>
      </div>
   </div>
   <div class="grid_5">
      <p>Mon</p>
      <div>
         <div class="suggest nudge-up"><span class="form-content-left">All Hours</span><span class="clear"></span></div>
      </div>
   </div>
   <div class="grid_5">
      <p>Tue</p>
      <div>
         <div class="suggest nudge-up"><span class="form-content-left">All Hours</span><span class="clear"></span></div>
      </div>
   </div>
   <div class="grid_5">
      <p>Wed</p>
      <div>
         <div class="suggest nudge-up"><span class="form-content-left">All Hours</span><span class="clear"></span></div>
      </div>
   </div>
   <div class="grid_5">
      <p>Thu</p>
      <div>
         <div class="suggest nudge-up"><span class="form-content-left">All Hours</span><span class="clear"></span></div>
      </div>
   </div>
   <div class="grid_5">
      <p>Fri</p>
      <div>
         <div class="suggest nudge-up"><span class="form-content-left">All Hours</span><span class="clear"></span></div>
      </div>
   </div>
   <div class="grid_5">
      <p>Sat</p>
      <div>
         <div class="suggest nudge-up">
            <div class="form-content-left">Morning</div>
            <div class="form-content-right">(7.00 - 8.00)</div>
            <span class="clear"></span><span class="clear"></span>
         </div>
      </div>
   </div>
</div>

需要

<div class="grid_15">
   <div class="grid_5">
      <p>Sun</p>
      <div>
         <div class="suggest nudge-up"><span class="form-content-left">All Hours</span><span class="clear"></span></div>
      </div>
   </div>
   <div class="grid_5">
      <p>Mon</p>
      <div>
         <div class="suggest nudge-up"><span class="form-content-left">All Hours</span><span class="clear"></span></div>
      </div>
   </div>
   <div class="grid_5">
      <p>Tue</p>
      <div>
         <div class="suggest nudge-up"><span class="form-content-left">All Hours</span><span class="clear"></span></div>
      </div>
   </div>
   **<span class="clear"></span>**
   <div class="grid_5">
      <p>Wed</p>
      <div>
         <div class="suggest nudge-up"><span class="form-content-left">All Hours</span><span class="clear"></span></div>
      </div>
   </div>
   <div class="grid_5">
      <p>Thu</p>
      <div>
         <div class="suggest nudge-up"><span class="form-content-left">All Hours</span><span class="clear"></span></div>
      </div>
   </div>
   <div class="grid_5">
      <p>Fri</p>
      <div>
         <div class="suggest nudge-up"><span class="form-content-left">All Hours</span><span class="clear"></span></div>
      </div>
   </div>
   **<span class="clear"></span>**
   <div class="grid_5">
      <p>Sat</p>
      <div>
         <div class="suggest nudge-up">
            <div class="form-content-left">Morning</div>
            <div class="form-content-right">(7.00 - 8.00)</div>
            <span class="clear"></span><span class="clear"></span>
         </div>
      </div>
   </div>
</div>

正如您所见，结果有，span标记（ <span class="clear"></span> ），每完成一次div后，我就尝试了：

jQuery

var a = $('html').find('div.grid_15 > div.grid_5');
for( var i = 0; i < a.length; i+=3 ) {
a.slice(i, i+3).append('<span class="clear"></span>');
}

但没有按预期得到结果，
这是链接：

http://jsfiddle.net/pxaS4/

请帮我解决问题。非常感谢。

Answer 1

您可以使用:nth-child(3n)选择器：

$('div.grid_15 > div.grid_5:nth-child(3n)').after('<span class="clear">foo</span>');

演示：http://jsfiddle.net/pxaS4/2/

Answer 2

$('.grid_5').each(function(index){

if(((index+1)%3)==0)
{
$(this).after('<span class="clear"></span>');
}

});

Answer 3

$(".grid_5").each(function (i) {
 if ((i+1)%3==0) $(this).after('<span class="clear"></span>');  
});

在每第3个div Jquery之后附加Span Tag

3 个答案: