使用 jQuery 到 select 元素，直到元素具有特定的 class，对每个集合应用 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 到 select 组元素。该组从 class 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

使用netUntill到select所有元素，使用add到select第一个和最后一个元素

尝试以下方法

  $('.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">

Answer 2

为此，您可以 select 所有 .beginFlex 元素并循环遍历它们。从那里您可以使用 nextUntil() 到 select 所有输入，直到下一个 .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">

使用 jQuery 到 select 元素，直到元素具有特定的 class，对每个集合应用 wrapALL

using jQuery to select elements until an element has a particular class, apply wrapALL to each set

jquery

select

wrapall

flexbox