在每个第3个div jQuery之后追加Span标签 [英] Append Span Tag, after every 3rd div Jquery
本文介绍了在每个第3个div jQuery之后追加Span标签的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在寻找在每个第三个div标签之后放置一个span标签的解决方案.
i am looking for the solution to place a span tag, after every third div tag .
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后,我就尝试了:
As you can See, the result has, span tag (<span class="clear"></span>
), after every third div completion, I tried :
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>');
}
但未获得预期的结果,
这是链接:
But not getting the result as expected,
here is the link :
请帮我解决. 非常感谢.
please help me with solution. Thanks a lot.
推荐答案
您可以使用:nth-child(3n)
选择器:
$('div.grid_15 > div.grid_5:nth-child(3n)').after('<span class="clear">foo</span>');
演示: http://jsfiddle.net/pxaS4/2/
Demo: http://jsfiddle.net/pxaS4/2/
这篇关于在每个第3个div jQuery之后追加Span标签的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文