3

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

更新：

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

$('这个')
并设置正确的后代选择器：
$("li label:first-child")
为了只选择列表项之后出现的第一个标签。

这是我所做的：

$(document).ready(function() {

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

2 回答 2

5

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

好的，这应该工作：

$('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>
于 2008-10-17T05:27:40.067 回答
3

一种方法是将所有内容包装在 <li> 中，然后将标签移出，例如

var $div = $('li').wrapInner('<div></div>').children('div');
$div.children('label').prependTo($div.parent());
于 2008-10-17T05:19:58.473 回答