使用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">