-2

我的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>
4

2 回答 2

2

为此，您可以选择所有.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">

于 2016-11-21T11:31:42.607 回答
1

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

于 2016-11-21T11:31:03.810 回答