Alle Elemente zwischen zwei übergeordneten Elementen umschließen

Question

Ich habe mehrere Zeilen, für die ich die Struktur oder Attribute nicht ändern kann. Aber ich kann untergeordnete Elemente hinzufügen (.start & .end) in diesen Zeilen.

Also ich möchte alle Elemente nach einer Zeile mit einem .start Kind-Element umbrechen, bis die nächste Zeile ein .end Kind-Element hat. Ich habe eine each Schleife erstellt, um dies zu erreichen. Aber das Problem ist, dass die schließende div meiner Verpackung eine Ebene zu tief ist.

Wie Sie im folgenden Ausschnitt, geht der Rand um alle Elemente nach dem .start Elemente sehen können, aber es sollte nur um Reihen 3, 4 und 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

seinen Sie möchten verwenden :has() selector

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