在多個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

回答

相關問題