jquery - 如果有子 ul，则将类添加到 li

Question

我有一个看起来像这样的菜单项。

<ul>
<li><a href="id=1">HOME</a></li>
<li><a href="id=2">News</a>
    <ul>
        <li><a href="id=3">News Archive</a></li>
    </ul>
</li>
</ul>

我希望它看起来像这样

<ul>
<li><a href="id=1">HOME</a></li>
<li class="hassub"><a href="id=2">News</a>
    <ul>
        <li><a href="id=3">News Archive</a></li>
    </ul>
</li>
</ul>

因此，如果 li 有一个孩子，那么它将有一个 hassub 类。

我试过用 jQuery 添加这个，见 fiddle。但它正在将类添加到所有 ul li。我哪里错了？

Answer 1

试试.has

$('ul li').has('ul').addClass('hassub');

Answer 2

试试这个并只使用一个$(selector)：

$('ul li:has(ul)').addClass('hassub');

现场演示：

http://jsfiddle.net/oscarj24/fNrQE/2/

​</p>

Answer 3

您无需检查 ul 是否存在即可将类添加到父 li，您只需在 jQuery 选择器中定位子 ul。这是一个例子：

// Add Class to LI with Child UL (Level 1)
$('.menuDiv li ul').parent().addClass('hasChild');

如果没有找到ul，代码不会触发。将类添加到所有列表项后，您可以使用 > 选择器仅定位第一个子锚点（如果需要）：

.menuDiv li.hasChild > a

...或<ul>以 li 父类为目标：

.menuDiv li.hasChild ul

---

您可以查看下面的链接以查看实时示例（也包含 2 级列表）以及有关代码的更多详细信息：

http://html-tuts.com/add-class-to-parent-li-if-has-child-ul/