Question

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

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

我需要列出每个列表项目

Answer 1

您不能只为文字添加样式。

您可以通过以下方式专门设置嵌套列表项的样式：

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

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

Answer 2

第一级，直接孩子

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

Answer 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规则本身来处理它。

使用jQuery将类添加到列表中

3 个答案: