Comment utiliser jQuery pour insérer un < DIV > enroulé autour d'un nombre variable d'éléments enfants?

Question

J'ai un code ASP.Net semblable au suivant (à l'intérieur d'un FIELDSET):

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

J'essaie de garder mon balisage aussi propre que possible, mais j'ai décidé que, pour diverses raisons, je devais insérer un DIV autour de tout ce qui se trouve dans l'élément de liste après le premier label, comme ceci:

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

Je préférerais le faire avec "Javascript discret" via jQuery au lieu de surcharger ma page de balises supplémentaires afin que je puisse conserver la forme sémantiquement "propre".

Je sais comment écrire un sélecteur jQuery pour accéder à la première étiquette de chaque élément de liste $ ("li + label") ou utiliser: premier enfant. Je sais aussi comment insérer des éléments après la sélection.

Ce que je ne peux pas comprendre (du moins à cette heure tardive), c'est comment tout retrouver après le premier libellé de l'élément de liste (ou, fondamentalement, tout ce qui se trouve dans l'élément de liste, à l'exception du premier libellé, serait une autre façon de mettre et encapsulez une DIV autour dans la fonction de préparation de document.

UPDATE:

Le code de Owen a fonctionné une fois les guillemets simples supprimés:

$('this')

et le sélecteur décent approprié:

$("li label:first-child")

afin de ne sélectionner que la première étiquette apparaissant après un élément de la liste.

Voici ce que j'ai fait:

$(document).ready(function() {

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

Answer 1

modifier : code corrigé (voir l'ancien code dans l'historique des révisions et des commentaires pour plus d'informations)

ok cela devrait marcher:

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

à partir de:

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

produit:

<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

Une solution consisterait simplement à tout insérer dans le < li > puis déplacez l'étiquette vers l'extérieur, par exemple

.

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