Wie verwende ich jQuery einfügen ein um eine variable Anzahl von untergeordneten Elemente gewickelt?

Question

Ich habe ASP.Net Code ähnlich dem folgenden (dies innerhalb eines FIELDSET ist):

<ol>
    <li>
        <label>Some label</label>
        <one or more form controls, ASP.Net controls, labels, etc.>
    </li>
    <li>
        <label>Another label</label>
        <... more of the same...>
    </li>
    ...
</ol>

Ich versuche, meine Markup so sauber, wie ich nur kann zu halten, aber ich habe beschlossen, dass aus verschiedenen Gründen, ich brauche ein DIV um alles in der Liste Element nach dem ersten Etikett wickeln, wie folgt aus:

<ol>
    <li>
        <label>Some label</label>
        <div class="GroupThese">
           <one or more form controls, ASP.Net controls, labels, etc.>
        </div>
    </li>
    <li>
        <label>Another label</label>
        <div class="GroupThese">
            <... more of the same...>
        </div>
    </li>
    ...
</ol>

Ich würde lieber tun dies mit „unaufdringlich Javascript“ über jQuery statt meine Seite von Littering mit zusätzlichen Markup so kann ich die Form halten semantisch „clean“.

Ich weiß, wie ein jQuery-Selektor zu schreiben, um das erste Etikett in jeder Liste Element $ ( "li + label") oder die Verwendung zu erhalten: first-child. Ich weiß auch, wie sich die Dinge nach der Auswahl einzufügen.

Was ich kann nicht herausfinden (zumindest diese spät in der Nacht) ist, wie alles nach dem ersten Etikett in der Liste Artikeln zu finden (oder im Grunde alles, was in der Liste Artikel mit Ausnahme des ersten Etikett würde eine anderer Weg zu bringen it) und ein DIV um, dass in dem Dokument bereit Funktion wickeln.

UPDATE:

Owen Code gearbeitet, nachdem ich die einfachen Anführungszeichen aus dem ganzen entfernt:

$('this')

und stellen Sie den richtigen decendent Selektor.

$("li label:first-child")

, um nur das erste Etikett auswählen, die nach einer Listenelement auftritt

Hier ist, was ich getan habe:

$(document).ready(function() {

    $('li label:first-child').each(function() {
        $(this).siblings().wrapAll('<div class="GroupThese"></div>');
    });
});

Answer 1

Bearbeiten : korrigierte Code (siehe alten Code in Revisionsgeschichte und Kommentare für weitere Informationen)

ok dies sollte funktionieren:

$('li label:first-child').each(function() {
    $(this).siblings().wrapAll('<div class="li-non-label-child-wrapper">');
});

Von:

<li>
    <label>Some label</label>
    <div>stuff</div>
    <div>other stuff</div>
</li>
<li>
    <label>Another label</label>
    <div>stuff3</div>
</li>

erzeugt:

<li>
    <label>Some label</label>
    <div class="li-non-label-child-wrapper">
      <div>stuff</div>
      <div>other stuff</div>
    </div>
</li>
<li>
    <label>Another label</label>
    <div class="li-non-label-child-wrapper">
      <div>stuff3</div>
    </div>
</li>

Answer 2

Ein Ansatz wäre, einfach alles, was innerhalb des

wickelt und dann das Etikett ausrücken, z.

var $div = $('li').wrapInner('<div></div>').children('div');
$div.children('label').prependTo($div.parent());