¿Cómo uso jQuery para insertar un < DIV > envuelto alrededor de un número variable de elementos secundarios?

Question

Tengo un código ASP.Net similar al siguiente (esto está dentro de 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>

Estoy tratando de mantener mi marcado tan limpio como sea posible, pero he decidido que por varias razones, necesito envolver un DIV alrededor de todo en el elemento de la lista después de la primera etiqueta, así:

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

Prefiero hacer esto con " Javascript no intrusivo " a través de jQuery en lugar de ensuciar mi página con marcas adicionales para que pueda mantener el formulario semánticamente "limpio".

Sé cómo escribir un selector jQuery para llegar a la primera etiqueta en cada elemento de la lista $ (" li + label ") o usar: first-child. También sé cómo insertar cosas después de la selección.

Lo que no puedo entender (al menos tan tarde en la noche) es cómo encontrar todo después de la primera etiqueta en el elemento de la lista (o básicamente todo en el elemento de la lista, excepto la primera etiqueta, sería otra forma de poner ) y envuelva un DIV alrededor de eso en la función de documento listo.

ACTUALIZAR:

El código de Owen funcionó una vez que eliminé las comillas simples de alrededor:

$('this')

y configuré el selector descendente adecuado:

$("li label:first-child")

para seleccionar solo la primera etiqueta que aparece después de un elemento de la lista.

Esto es lo que hice:

$(document).ready(function() {

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

Answer 1

editar : código corregido (consulte el código anterior en el historial de revisiones y los comentarios para obtener más información)

ok esto debería 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>

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 enfoque sería simplemente envolver todo dentro de < li > y luego mueva la etiqueta hacia fuera, por ejemplo,

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