javascript - jQuery:获取嵌套列表中顶部 UL 类型的第一个元素

Question

我有一个这样的嵌套列表:

<ul class="list">

    <li class="list_item_type_1">
        <ul class="list">
            <li class="list_item_type_2">Unnested item</li>
        </ul>
    </li>

    <li class="list_item_type_2">Unnested item</li>

</ul>

使用 jQuery，我想在第一个 .list 中的所有 .list_item_type_2 之前添加一个列表项。

我是这样写的:

$('.list:first').find('li.list_item_type_2:first').before('<li class="list_item_type_1">Nested list (...)</li>');

这不会按预期工作，因为脚本在 second .list 中找到第一个 .list_item_type_2 并将新代码附加到那里相反。

如何将搜索保留在第一个 ul 中并防止它进入底层 ul 元素？

干杯!

Answer 1

首先，我建议以这种方式构建 HTML。使用 jQuery 来组装 HTML。它负责转义和所有其他有用的事情:

$("<li></li>").addClass("list_item_type_1")
  .text("Nested list (...)")
  .prependTo("ul.list:first > li.list_item_type:first");

此外，尽可能始终使用标签选择器(“ul.list”)而不是裸类选择器(“.list”)。它在大多数浏览器上快。