如何使用 jQuery 插入一个包裹在可变数量子元素周围的 <DIV> ？

Posted 2023-05-07

【中文标题】如何使用 jQuery 插入一个包裹在可变数量子元素周围的 <DIV> ？

【英文标题】：How do I use jQuery to insert a <DIV> wrapped around a variable number of child elements?

【发布时间】：2010-09-17 16:33:27

【问题描述】：

我有类似于以下的 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。

更新：

一旦我从周围删除单引号，欧文的代码就起作用了：

$('this')

并设置适当的后代选择器：

$("li label:first-child")

以便仅选择出现在 a 之后的第一个标签项目清单。

这是我所做的：

$(document).ready(function() 

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

【参考方案1】：

编辑：更正的代码（有关详细信息，请参阅修订历史和 cmets 中的旧代码）

好的，这应该可以工作：

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

【讨论】：

这就是我一直在寻找的东西。我明天试试，如果它对我有用，我会接受答案...谢谢！

不幸的是，您的代码将分别包装每个子元素（在本例中为 ）。

谢谢！像魅力一样工作（更好的是，我学到了一些新东西）！

【参考方案2】：

一种方法是将所有内容包装在

中，然后将标签移出，例如

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