如何使用jQuery插入包含可变数量的子元素的<DIV>？

Question

我有类似于以下的ASP.Net代码(这是在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>

我试图保持我的标记尽可能干净,但我已经决定,出于各种原因,我需要在第一个标签之后将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>

我宁愿通过jQuery使用"不显眼的Javascript"来做这个,而不是用额外的标记乱丢我的页面,所以我可以保持表单在语义上"干净".

我知道如何编写一个jQuery选择器来获取每个列表项$("li + label")中的第一个标签或使用:first-child.我也知道如何在选择后插入东西.

我无法弄清楚(至少在深夜)是如何在列表项中的第一个标签之后找到所有内容(或者基本上列表项中的所有内容除了第一个标签之外都是另一种方式)在文档就绪函数中围绕它包装DIV.

更新:

一旦我删除了周围的单引号,Owen的代码就可以工作了:

$('this')

并设置适当的decendent选择器:

$("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>