Come posso usare jQuery per inserire un < DIV > racchiuso in un numero variabile di elementi figlio?

Question

Ho un codice ASP.Net simile al seguente (all'interno di 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>

Sto cercando di mantenere il mio markup il più pulito possibile, ma ho deciso che per vari motivi, devo avvolgere un DIV attorno a tutto nella voce di elenco dopo la prima etichetta, in questo modo:

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

Preferirei farlo con " Javascript discreto " tramite jQuery invece di sporcare la mia pagina con markup extra in modo da poter mantenere semanticamente il modulo "pulito".

So come scrivere un selettore jQuery per arrivare alla prima etichetta in ogni elemento dell'elenco $ (" li + label ") o usare: first-child. So anche come inserire le cose dopo la selezione.

Quello che non riesco a capire (almeno fino a tarda notte) è come trovare tutto dopo la prima etichetta nella voce di elenco (o sostanzialmente tutto nella voce di elenco tranne la prima etichetta sarebbe un altro modo di mettere ) e avvolgere un DIV attorno a quello nella funzione Pronto documento.

UPDATE:

Il codice di Owen ha funzionato una volta che ho rimosso le virgolette singole da intorno:

$('this')

e ho impostato il selettore decente appropriato:

$("li label:first-child")

per selezionare solo la prima etichetta che si verifica dopo una voce di elenco.

Ecco cosa ho fatto:

$(document).ready(function() {

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

Answer 1

modifica : codice corretto (vedi il vecchio codice nella cronologia delle revisioni e commenti per ulteriori informazioni)

ok questo dovrebbe funzionare:

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

Da:

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

produce:

<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

Un approccio sarebbe quello di avvolgere tutto all'interno di < li > quindi sposta l'etichetta, ad esempio

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