使用jQuery選擇元素，直到一個元素有一個特定的類，適用wrapALL對每個集

Question

我的HTML是如下

<input class="beginFlex" name="name1" value="A"> 
<input name="name2" value="A"> 
<input class="endFlex" name="name3" value="A"> 

<input class="beginFlex" name="name1" value="B"> 
<input name="name4 value="B"> 
<input name="name5" value="B"> 
<input name="name6" value="B"> 
<input class="endFlex" name="name1" value="B"> 

<input class="beginFlex" name="name1" value="C"> 
<input name="name7" value="C"> 
<input name="name8" value="C"> 
<input class="endFlex" name="name1" value="C"> 

我想使用jQuery選擇一組元素。該組從beginFlex類開始到endFlex結束。然後，我婉申請wrapAll（），使我得到如下的代碼：

<div style="display:flex"> 
    <input class="beginFlex" name="name1" value="A"> 
    <input name="name2" value="A"> 
    <input class="endFlex" name="name3" value="A"> 
</div> 

<div style="display:flex"> 
    <input class="beginFlex" name="name1" value="B"> 
    <input name="name4 value="B"> 
    <input name="name5" value="B"> 
    <input name="name6" value="B"> 
    <input class="endFlex" name="name1" value="B"> 
</div> 

<div style="display:flex"> 
    <input class="beginFlex" name="name1" value="C"> 
    <input name="name7" value="C"> 
    <input name="name8" value="C"> 
    <input class="endFlex" name="name1" value="C"> 
</div> 

Answer 1

要做到這一點，你可以選擇所有的.beginFlex個元素並通過它們循環。從那裏你可以使用nextUntil()來選擇所有的輸入，直到下一個.beginFlex並將它們包裝在一個div中。試試這個：

$('input.beginFlex').each(function() { 
 
    $(this).nextUntil('.beginFlex').andSelf().wrapAll('<div class="flex" />'); 
 
});

.flex { 
 
    display: flex; 
 
    
 
    /* to show it working */ 
 
    border: 1px solid #C00; 
 
    padding: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input class="beginFlex" name="name1" value="A"> 
 
<input name="name2" value="A"> 
 
<input class="endFlex" name="name3" value="A"> 
 

 
<input class="beginFlex" name="name1" value="B"> 
 
<input name="name4" value="B"> 
 
<input name="name5" value="B"> 
 
<input name="name6" value="B"> 
 
<input class="endFlex" name="name1" value="B"> 
 

 
<input class="beginFlex" name="name1" value="C"> 
 
<input name="name7" value="C"> 
 
<input name="name8" value="C"> 
 
<input class="endFlex" name="name1" value="C">

Answer 2

使用netUntill選擇所有元素，使用add選擇第一個和最後一個元素

請嘗試以下

$('.beginFlex').each(function() { 
 
    $(this).nextUntil('.endFlex').add($(this)).add($(this).nextAll('.endFlex')[0]).wrapAll('<div style="display:flex">'); 
 
    });

.flex { 
 
    display: flex; 
 
    border: 1px solid #C00; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input class="beginFlex" name="name1" value="A"> 
 
<input name="name2" value="A"> 
 
<input class="endFlex" name="name3" value="A"> 
 

 
<input class="beginFlex" name="name1" value="B"> 
 
<input name="name4" value="B"> 
 
<input name="name5" value="B"> 
 
<input name="name6" value="B"> 
 
<input class="endFlex" name="name1" value="B"> 
 

 
<input class="beginFlex" name="name1" value="C"> 
 
<input name="name7" value="C"> 
 
<input name="name8" value="C"> 
 
<input class="endFlex" name="name1" value="C">