2つの親要素の間にすべての要素をラップします

Question

構造や属性を変更できない複数の行があります。しかし、これらの行に子要素（.start & .end）を追加できます。

したがって、.start子要素を持つ行の後のすべての要素を、次の行に.end子要素があるまでラップしたいとします。私はこれを達成するためにループeachを作成しました。しかし問題は、私のラップのクローズド・ディビジョンが深すぎるということです。

次のスニペットで見ることができるように、境界線が.start要素の後の周りのすべての要素を行くが、それは唯一の行3の周りにする必要があり、4と9

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

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

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

Answer 1

あなたは使いたい:has() selector

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