Question

页面上的无序列表具有ID，但子li元素没有类。单击父div“ top_nav”时，我正在尝试为所有第一级li元素分配一个类

我尝试了以下jquery脚本

<div id="top-nav">
  <a id="nav-icon">show nav</a>
  <ul id="root-nav">
    <li class="active">First Menu Item </li>
    <li>First Menu Item </li>
    <li>First Menu Item </li>
    <li>First Menu Item </li>
  </ul>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

*.trg

运行代码后，单击div时不会添加该类。万一我遗漏了一些东西，我可以再看看吗？

Answer 1

您的代码中有很多错字。您在()之后错过了function。 .child()应该是.children()，而.addclass()应该是.addClass()。 #top_nav应该是#top-nav。

您在错误的元素上使用了事件处理程序。如果要单击top-nav元素，则应将其委托给div#top-nav，而不是div#top-nav ul li。 li元素不是top-nav的直接子元素，因此您需要使用.find()而不是.children()。

$(document).on('click', 'div#top-nav', function() {
  $(this).find('> ul > li').addClass('new-class')
});

.new-class {
  color: red;
}

<div id="top-nav">
  <a id="nav-icon">show nav</a>
  <ul id="root-nav">
    <li class="active">First Menu Item </li>
    <li>First Menu Item </li>
    <li>First Menu Item </li>
    <li>First Menu Item </li>
  </ul>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

单击div时，将类添加到<ul>下的子<li>

1 个答案: