使用 jQuery 将类添加到列表中答案

【问题标题】：Adding class to list with jQuery使用 jQuery 将类添加到列表中
【发布时间】：2013-11-15 06:16:08
【问题描述】：

我有嵌套列表，我需要为每个项目设置样式。通常我会这样做：

$('#myList li').addClass('myClass');

但是，因为它们是嵌套的，我想我只需要设置文本样式。我如何用 jQuery 做到这一点？我偷了这个，但是没有用：

$('#myList li').text().addClass('myClass');

这里是 HTML

<ul id="myList">
    <li>
        item 1
    </li>
    <li>
        item 2
        <ul>
            <li>
                asdasd
            </li>
        </ul>
    </li>
</ul>

我需要为每个列表项设置样式

【问题讨论】：

是“asdasd”你想要设置样式的文本吗？？
将文本包装在一个 span 中并将类添加到其中。
您不能在文本中添加类。您需要使用 'div' 或 'span' 对其进行包装。
啊，我担心我不得不这样做......谢谢。

标签： javascript jquery html jquery-selectors

【解决方案1】：

第一级，直接子级

$('#myList > li').addClass('myClass');

二级及以上

$('#myList li li').addClass('myClass');

这个主题被大量记录在on jquery api selector page

现在您的问题已被编辑：您需要设置所有列表项的样式：

CSS

li { /* will affect ALL list-items */}

现在你说得更清楚了：

包装 LI 元素内的内容

$('li').wrapInner( "<span class='your-css-selector'></span>" );

现在你证明了你只会搜索复制粘贴解决方案：

包装 LI 元素内部的内容，而不是另一个内部元素中的内容

$('#myList li').each(function(){
         $(this).contents().first().wrap("<span/>")
    });

感谢 user PLS 从他的评论中复制粘贴。

【讨论】：

我想我必须手动换行？ .wrapInner 将包装所有内容，包括下一个 UL。
@santa 你可以这样做jsfiddle.net/3REp3 但是如果你可以修改你的标记考虑这样做而不是使用js修改html。
现在还不是圣诞节，所以请努力阅读api.jquery.com/wrapInner 和其他“选择器”文档。你会发现自己可以包装你选择的东西。像 $('selector').not(thatotherthing) ... 之类的东西。

【解决方案2】：

您不能只设置文本样式。

您可以通过这样做来专门设置嵌套列表项的样式：

$('ul#myList > li > ul > li').addClass('myClass');

这会将myClass 类添加到您的示例中包含文本asdasd 的项目

【讨论】：

【解决方案3】：

只需将您的文本包装在一个跨度中并对其应用类。当您在li 上应用类时，其所有内容都会受到影响，因此任何后代以及 li 下的嵌套 ul 都会受到影响。相反，只需将文本包装在一个元素中并将类应用于它们。

<ul id="myList">
    <li>
        <span>item 1</span>
    </li>
    <li>
        <span>item 2</span>
        <ul>
            <li>
                <span>asdasd</span>
            </li>
        </ul>
    </li>
</ul>

和

$('#myList li > span').addClass("myClass");

有了这个，你可以使用 Css 规则本身来处理它。

【讨论】：