在多个div中包装多个具有相同类名的孩子jQuery

我想让我们的jquery方法wrapAll在具有相同类名的多个父母中使用相同类名包装多个孩子，一旦窗口大小小于706。在多个div中包装多个具有相同类名的孩子jQuery

我想离开这里。

<div> 
    <div class="a"></div> 
    <div class="b"></div> 
    <div class="c"></div> 
</div> 

<div> 
    <div class="a"></div> 
    <div class="b"></div> 
    <div class="c"></div> 
</div> 

<div> 
    <div class="a"></div> 
    <div class="b"></div> 
    <div class="c"></div> 
</div>

对此。

<div> 
    <div> 
    <div class="a"></div> 
    <div class="b"></div> 
    </div> 
    <div class="c"></div> 
</div> 

<div> 
    <div> 
    <div class="a"></div> 
    <div class="b"></div> 
    </div> 
    <div class="c"></div> 
</div> 

<div> 
    <div> 
    <div class="a"></div> 
    <div class="b"></div> 
    </div> 
    <div class="c"></div> 
</div>

继承人我的jQuery

if ($(window).width() < 705) { 
    $(".a,.b").wrapAll("<div class='a-b'></div>"); 
    } 
    else { 

    }

我需要给他们所有的个人类名，并创建3种不同的方法wrapAll？或者有什么办法可以用一种方法/功能来完成这一切？

来源

2017-04-13 ajwerth

隔离父并查看每个组里面的每个组以包装

$('.list').each(function(){ 
 
$(this).find(".a,.b").wrapAll("<div class='a-b'></div>"); 
 
})

.a-b{border:1px solid green}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="list"> 
 
    <div class="a">A item</div> 
 
    <div class="b">B item</div> 
 
    <div class="c">C Item</div> 
 
</div> 
 
<div class="list"> 
 
    <div class="a">A item</div> 
 
    <div class="b">B item</div> 
 
    <div class="c">C Item</div> 
 
</div> 
 
<div class="list"> 
 
    <div class="a">A item</div> 
 
    <div class="b">B item</div> 
 
    <div class="c">C Item</div> 
 
</div>

来源

2017-04-13 15:42:09 charlietfl

由于这看起来像它会工作，我不能让它太虽然IDK的，如果它的窗口（）。width或包裹我没有得到任何控制台错误。 – ajwerth

您是否将代码包装在document.ready中？或elemetns存在后称之为？ – charlietfl

我明白了我没有将父类名更改为我正在使用的父类名。谢谢！ – ajwerth

要做到这一点你可以遍历所有.a元素，得到他们的兄弟姐妹.b，然后用wrapAll()包含它们中的另一个div，像这样：

$('.a').each(function() { 
 
    var $b = $(this).next('.b'); 
 
    $(this).add($b).wrapAll('<div />'); 
 
});

/* this is just to make the div structure more obvious in the output */ 
 
div { 
 
    border: 1px solid #CCC; 
 
    padding: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <div class="a">a</div> 
 
    <div class="b">b</div> 
 
    <div class="c">c</div> 
 
</div> 
 

 
<div> 
 
    <div class="a">a</div> 
 
    <div class="b">b</div> 
 
    <div class="c">c</div> 
 
</div> 
 

 
<div> 
 
    <div class="a">a</div> 
 
    <div class="b">b</div> 
 
    <div class="c">c</div> 
 
</div>

来源

2017-04-13 15:40:29

在多个div中包装多个具有相同类名的孩子jQuery

回答

相关问题