Как мне использовать jQuery для вставки a <DIV> , обернутого вокруг переменного количества дочерних элементов?

Question

У меня есть ASP.Net код, похожий на следующий (он находится внутри набора полей):

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

Я пытаюсь сохранить свою разметку настолько чистой, насколько это возможно, но я решил, что по разным причинам мне нужно обернуть DIV вокруг всего элемента списка после первой метки, вот так:

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

Я бы предпочел сделать это с помощью "ненавязчивого Javascript" через jQuery вместо того, чтобы засорять мою страницу дополнительной разметкой, чтобы я мог сохранить форму семантически "чистой".

Я знаю, как написать селектор jQuery, чтобы перейти к первой метке в каждом элементе списка $("li + label") или использовать:first-child.Я также знаю, как вставлять элементы после выделения.

Чего я не могу понять (по крайней мере, так поздно ночью), так это как найти все после первой метки в элементе списка (или, по сути, все в элементе списка, за исключением первой метки, было бы другим способом выразить это) и обернуть DIV вокруг этого в функции document ready.

Обновить:

Код Оуэна заработал, как только я удалил одинарные кавычки со всего:

$('this')

и установите соответствующий порядковый номер селектора:

$("li label:first-child")

для того, чтобы выбрать только первую метку, которая встречается после элемента списка.

Вот что я сделал:

$(document).ready(function() {

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

Answer 1

Редактировать:исправленный код (смотрите старый код в истории изменений и комментариях для получения дополнительной информации)

хорошо, это должно сработать:

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

От:

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

производит:

<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

Одним из подходов было бы просто обернуть все внутри <li> , а затем переместить ярлык, например

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