Question

如果该项目包含另一个<li>，我需要在<ul>中插入一个图标。

HTML

<ul>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a>
        <ul>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
        </ul>
    </li>    
    <li><a href="#">link</a></li>
</ul>

JS

$('ul:first > li').each(function() {
    if ($(this).find('ul').length > 0) {
        $(this).find('a').prepend('<i class="fa fa-caret-down"></i>');
    }
});

不幸的是，我现在也将它插入到第二个<li>的每个<ul>中。我如何才能将其保持在顶级水平？

$('ul:first > li').each(function() {
    if ($(this).find('ul').length > 0) {
        $(this).find('a').prepend('<i class="fa fa-caret-down">ICON </i>');
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a>
        <ul>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
        </ul>
    </li>    
    <li><a href="#">link</a></li>
</ul>

Answer 1

使用:has() selector $('ul:first > li:has(ul)')选择li，如果它有子ul元素。

此外，您需要在.find()方法中使用直接子选择器，以便仅选择直接a子元素$(this).find('>a')。

Example Here

$('ul:first > li:has(ul)').each(function() {
    $(this).find('>a').prepend('<i class="fa fa-caret-down"></i>');
});

仅限顶级列表项

1 个答案: