使用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中。试试这个：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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