Question

我有多行，我无法更改结构或属性。但我可以在这些行中添加子元素（.start＆amp; .end）。

所以我想用一个.start子元素在一行之后包装所有元素，直到下一行有一个.end子元素。我创建了一个each循环来实现这一目标。但问题是我的包裹的结束div太深了一层。

正如您在下面的代码段中看到的那样，边框围绕.start元素之后的所有元素，但它应该只在第3,4和9行附近。

＆＃13;

$('.row .start').closest('.row').each(function (index) {
  $(this).nextUntil(".row .end").wrapAll("<div class='box'/>");
});

＆＃13;

.box{
  border: 1px solid red;
  background-color:pink;
  padding: 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="element">1</div>
</div>
<div class="row">
  <div class="element">
    <div class="start">start</div>
  </div>
</div>
<div class="row">
  <div class="element">3</div>
</div>
<div class="row">
  <div class="element">4</div>
</div>
<div class="row">
  <div class="element">
    <div class="end">end</div>
  </div>
</div>
<div class="row">
  <div class="element">6</div>
</div>
<div class="row">
  <div class="element">7</div>
</div>
<div class="row">
  <div class="element">
     <div class="start">start</div>
  </div>
</div>
<div class="row">
  <div class="element">9</div>
</div>
<div class="row">
  <div class="element">
    <div class="end">end</div>
  </div>
</div>

＆＃13;

Answer 1

您想使用:has() selector

$(this).nextUntil(".row:has('.end')")

将所有元素包装在两个父元素之间

1 个答案: