javascript - 仅顶级列表项

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>');
});