相关疑难解决方法(0)

jQuery包装div中的每个X元素

我有一个由H3标签预先列出的元素(div)列表

<h3></h3>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<h3></h3>
<div class="item"></div>
<div class="item"></div>
Run Code Online (Sandbox Code Playgroud)

等等...

使用jQuery,我想分组每3个div(或更少),然后每个h3,如下所示:

<h3></h3>
<div class=row>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
<div class=row>
    <div class="item"></div>
</div>
<h3></h3>
<div class=row>
    <div class="item"></div>
    <div class="item"></div>
</div>
Run Code Online (Sandbox Code Playgroud)

我尝试了这里提出的解决方案:使用Javascript为每5个元素插入<div>, 但它显然将所有div分组.我也试过使用〜选择器没有任何成功:

var a = $('h3 ~ div.item');

for( var i = 0; i < a.length; i+=3 ) {
    a.slice(i, i+3).wrapAll('<div class="row"></div>');
}
Run Code Online (Sandbox Code Playgroud)

任何帮助将受到高度赞赏.

jquery grouping

7
推荐指数
1
解决办法
5518
查看次数

如何使用jquery用html包装每3个子div?

可能重复:
在div中包含每3个div

首先,我知道我应该使用服务器端语言来实现这一点,而不是像jquery这样的客户端,但这不是重点,我只是想学习如何使用它来操纵html.继承人html:

<div class="items">
  <div class="boxgrid"><span class="cushycms"><a href="#"><img src="1.jpg" alt=""/></a></span><div class="cover"><span class="film_title">Title 1</span></div></div>
  <div class="boxgrid"><span class="cushycms"><a href="#"><img src="2.jpg" alt=""/></a></span><div class="cover"><span class="film_title">Title 2</span></div></div>
  <div class="boxgrid"><span class="cushycms"><a href="#"><img src="3.jpg" alt=""/></a></span><div class="cover"><span class="film_title">Title 3</span></div></div>
  <div class="boxgrid"><span class="cushycms"><a href="#"><img src="4.jpg" alt=""/></a></span><div class="cover"><span class="film_title">Title 4</span></div></div>
  <div class="boxgrid"><span class="cushycms"><a href="#"><img src="5.jpg" alt=""/></a></span><div class="cover"><span class="film_title">Title 5</span></div></div>
  <div class="boxgrid"><span class="cushycms"><a href="#"><img src="6.jpg" alt=""/></a></span><div class="cover"><span class="film_title">Title 6</span></div></div>
</div>
Run Code Online (Sandbox Code Playgroud)

我希望能够每3包<divs>内的<div class="items">又一格:<div class="row"></div>.所以它最终是这样的:

<div class="items">
 <div class="row">  
  <div class="boxgrid"><span class="cushycms"><a href="#"><img src="1.jpg" alt=""/></a></span><div class="cover"><span …
Run Code Online (Sandbox Code Playgroud)

html javascript jquery

4
推荐指数
1
解决办法
6538
查看次数

标签 统计

jquery ×2

grouping ×1

html ×1

javascript ×1