Como eu uso jQuery para inserir um acondicionada em torno de um número variável de elementos filhos?

Question

Eu tenho o código ASP.Net semelhante à seguinte (isto é dentro de um 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>

Eu estou tentando manter minha marcação tão limpo quanto eu puder, mas eu decidi que, por várias razões, eu preciso quebrar uma DIV em torno de todo o item da lista após o primeiro rótulo, como este:

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

Eu preferiria fazer isso com "Javascript discreto" via jQuery em vez de jogar lixo minha página com marcação extra para que eu possa manter a forma semanticamente "limpa".

Eu sei como escrever um seletor jQuery para chegar à primeira etiqueta em cada item da lista $ ( "li + etiqueta") ou utilizar: first-child. Também sei como inserir as coisas após a seleção.

O que eu não consigo descobrir (pelo menos a essa hora da noite) é como encontrar tudo após o primeiro rótulo no item da lista (ou basicamente tudo no item da lista exceto para o primeiro rótulo seria outra maneira de colocar -lo) e enrole uma DIV em torno de que na função pronto documento.

UPDATE:

código de Owen trabalhou uma vez eu removi as aspas simples de todo:

$('this')

e definir o selector decendent adequada:.

$("li label:first-child")

, a fim de selecionar apenas a primeira etiqueta que ocorre após um item da lista

Aqui está o que eu fiz:

$(document).ready(function() {

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

Answer 1

Editar : código corrigido (ver código antigo no histórico de revisão e comentários para mais informações)

ok isso deve funcionar:

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

De:

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

produz:

<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

Uma abordagem seria a tudo envoltório apenas dentro do

e, em seguida, mover o rótulo para fora, por exemplo.

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