javascript - jquery如何统计子李

Question

web coding

如何数 child li元素。

$("#jmenu ul").length<br/>
$("#jmenu ul").children.length

这里是完整的代码:

<ul style="width:80%;border:1px">
        <li class="no-sub" id="index.php"><a class="top-heading" href="index.php">首页</a></li>
        <li align="left" tabindex="0" class="" style="z-index: 1;"><a class="top-heading" id="H00000001" aria-haspopup="true">你不可不知</a><i class="caret"></i> <div class="dropdown" style="transition: none 0s ease 0s ; height: auto;"><div class="dd-inner"><ul class="column"><li id="M00000001" style=""><a href="news.php?id=M00000001" style="">网络安全</a></li><li id="M00000002" style=""><a href="news.php?id=M00000002" style="">青少年</a></li><li id="M00000003" style=""><a href="news.php?id=M00000003" style="">亲子关系</a></li><li id="M00000004" style=""><a href="news.php?id=M00000004" style="">夫妻关系</a></li><li id="M00000005" style=""><a href="news.php?id=M00000005" style="">情侣关系</a></li><li id="M00000006" style=""><a href="news.php?id=M00000006" style="">同性恋</a></li><li id="M00000007" style=""><a href="news.php?id=M00000007" style="">色情危害</a></li><li id="M00000008" style=""><a href="news.php?id=M00000008" style="">其他</a></li></ul></div></div></li>
        <li align="left" tabindex="0" style="z-index: 1;" class=""><a class="top-heading" id="H00000002" aria-haspopup="true">我们的活动</a><i class="caret"></i> <div class="dropdown" style="transition: none 0s ease 0s ; height: auto;"><div class="dd-inner"><ul class="column"><li id="M00000009" style=""><a href="news.php?id=M00000009" style="">当前活动</a></li><li id="M00000010" style=""><a href="news.php?id=M00000010" style="">活动历史</a></li><li id="M00000011" style=""><a href="news.php?id=M00000011" style="">讲员资料</a></li><li id="M00000012" style=""><a href="news.php?id=M00000012" style="">活动照片</a></li></ul></div></div></li>
        <li align="left" tabindex="0" class="" style="z-index: 1;"><a class="top-heading" id="H00000003" aria-haspopup="true">资料库</a><i class="caret"></i> <div class="dropdown" style="transition: none 0s ease 0s ; height: auto;"><div class="dd-inner"><ul class="column"><li id="M00000013" style=""><a href="news.php?id=M00000013" style="">教材下载</a></li><li id="M00000014" style=""><a href="news.php?id=M00000014" style="">活动宣传材料</a></li><li id="M00000015" style=""><a href="news.php?id=M00000015" style="">讲座会材料</a></li><li id="M00000016" style=""><a href="news.php?id=M00000016" style="">短片，动画，影片</a></li><li id="M00000017" style=""><a href="news.php?id=M00000017" style="">广播节目</a></li></ul></div></div></li>
        <li align="left" tabindex="0" class="" style="z-index: 1;"><a class="top-heading" id="H00000004" aria-haspopup="true">真人见证</a><i class="caret"></i> <div class="dropdown" style="transition: none 0s ease 0s ; height: auto;"><div class="dd-inner"><ul class="column"><li id="M00000018" style=""><a href="news.php?id=M00000018" style="">单亲妈妈</a></li><li id="M00000019" style=""><a href="news.php?id=M00000019" style="">其他分享</a></li></ul></div></div></li>
        <li align="left" tabindex="0" class="" style="z-index: 1;"><a class="top-heading" id="H00000005" aria-haspopup="true">新闻案列</a><i class="caret"></i> <div class="dropdown" style="transition: none 0s ease 0s ; height: auto;"><div class="dd-inner"><ul class="column"><li id="M00000034" style=""><a href="news.php?id=M00000034" style="">2017</a></li><li id="M00000035" style=""><a href="news.php?id=M00000035" style="">2016</a></li><li id="M00000036" style=""><a href="news.php?id=M00000036" style="">2018</a></li></ul></div></div></li>
        <li align="left" tabindex="0" class="" style="z-index: 1;"><a class="top-heading" id="H00000006" aria-haspopup="true">推荐</a><i class="caret"></i> <div class="dropdown" style="transition: none 0s ease 0s ; height: auto;"><div class="dd-inner"><ul class="column"><li id="M00000020" style=""><a href="news.php?id=M00000020" style="">举报不良内容</a></li><li id="M00000021" style=""><a href="news.php?id=M00000021" style="">软体推荐</a></li><li id="M00000022" style=""><a href="news.php?id=M00000022" style="">性上瘾检测表</a></li><li id="M00000023" style=""><a href="news.php?id=M00000023" style="">祷告文</a></li><li id="M00000024" style=""><a href="news.php?id=M00000024" style="">网络安全研习会表格下载</a></li><li id="M00000025" style=""><a href="news.php?id=M00000025" style="">关怀同性恋者辅导员培训会表格下载</a></li></ul></div></div></li>
        <li align="left" tabindex="0" class="" style="z-index: 1;"><a class="top-heading" id="H00000007" aria-haspopup="true">关于我们</a><i class="caret"></i> <div class="dropdown" style="transition: none 0s ease 0s ; height: auto;"><div class="dd-inner"><ul class="column"><li id="M00000026" style=""><a href="news.php?id=M00000026" style="">计划缘起</a></li><li id="M00000027" style=""><a href="news.php?id=M00000027" style="">计划目标</a></li><li id="M00000028" style=""><a href="news.php?id=M00000028" style="">执行单位和人力情形</a></li><li id="M00000029" style=""><a href="news.php?id=M00000029" style="">执行步骤</a></li><li id="M00000030" style=""><a href="news.php?id=M00000030" style="">预订执行进度</a></li><li id="M00000031" style=""><a href="news.php?id=M00000031" style="">实施对象和期程,预期效益</a></li><li id="M00000032" style=""><a href="news.php?id=M00000032" style="">XOX标志</a></li></ul></div></div></li>
        <li id="recmd" class="no-sub" style="color: unset; background-color: unset;"><a class="top-heading" href="news.php?id=news.php?id=R" style="vertical-align: middle;"><p1 style="color: rgb(231, 255, 0);">推</p1><p2 style="color: rgb(0, 237, 255);">荐</p2></a></li>
        <li class="no-sub" id="news.php?id=A"><a class="top-heading" href="news.php?id=news.php?id=A">关于我们</a></li>
    </ul>

Answer 1

使用 > 因为它们是父级的直接子级:

$("#jmenu > ul > li").length

console.log($("#jmenu > ul > li").length)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="jmenu">
  <div>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </div>
  <ul style="width:80%;border:1px">
    <li class="no-sub" id="index.php"><a class="top-heading" href="index.php">首页</a></li>
    <li align="left" tabindex="0" class="" style="z-index: 1;"><a class="top-heading" id="H00000001" aria-haspopup="true">你不可不知</a><i class="caret"></i>
      <div class="dropdown" style="transition: none 0s ease 0s ; height: auto;">
        <div class="dd-inner">
          <ul class="column">
            <li id="M00000001" style=""><a href="news.php?id=M00000001" style="">网络安全</a></li>
            <li id="M00000002" style=""><a href="news.php?id=M00000002" style="">青少年</a></li>
            <li id="M00000003" style=""><a href="news.php?id=M00000003" style="">亲子关系</a></li>
            <li id="M00000004" style=""><a href="news.php?id=M00000004" style="">夫妻关系</a></li>
            <li id="M00000005" style=""><a href="news.php?id=M00000005" style="">情侣关系</a></li>
            <li id="M00000006" style=""><a href="news.php?id=M00000006" style="">同性恋</a></li>
            <li id="M00000007" style=""><a href="news.php?id=M00000007" style="">色情危害</a></li>
            <li id="M00000008" style=""><a href="news.php?id=M00000008" style="">其他</a></li>
          </ul>
        </div>
      </div>
    </li>
    <li align="left" tabindex="0" style="z-index: 1;" class=""><a class="top-heading" id="H00000002" aria-haspopup="true">我们的活动</a><i class="caret"></i>
      <div class="dropdown" style="transition: none 0s ease 0s ; height: auto;">
        <div class="dd-inner">
          <ul class="column">
            <li id="M00000009" style=""><a href="news.php?id=M00000009" style="">当前活动</a></li>
            <li id="M00000010" style=""><a href="news.php?id=M00000010" style="">活动历史</a></li>
            <li id="M00000011" style=""><a href="news.php?id=M00000011" style="">讲员资料</a></li>
            <li id="M00000012" style=""><a href="news.php?id=M00000012" style="">活动照片</a></li>
          </ul>
        </div>
      </div>
    </li>
    <li align="left" tabindex="0" class="" style="z-index: 1;"><a class="top-heading" id="H00000003" aria-haspopup="true">资料库</a><i class="caret"></i>
      <div class="dropdown" style="transition: none 0s ease 0s ; height: auto;">
        <div class="dd-inner">
          <ul class="column">
            <li id="M00000013" style=""><a href="news.php?id=M00000013" style="">教材下载</a></li>
            <li id="M00000014" style=""><a href="news.php?id=M00000014" style="">活动宣传材料</a></li>
            <li id="M00000015" style=""><a href="news.php?id=M00000015" style="">讲座会材料</a></li>
            <li id="M00000016" style=""><a href="news.php?id=M00000016" style="">短片，动画，影片</a></li>
            <li id="M00000017" style=""><a href="news.php?id=M00000017" style="">广播节目</a></li>
          </ul>
        </div>
      </div>
    </li>
    <li align="left" tabindex="0" class="" style="z-index: 1;"><a class="top-heading" id="H00000004" aria-haspopup="true">真人见证</a><i class="caret"></i>
      <div class="dropdown" style="transition: none 0s ease 0s ; height: auto;">
        <div class="dd-inner">
          <ul class="column">
            <li id="M00000018" style=""><a href="news.php?id=M00000018" style="">单亲妈妈</a></li>
            <li id="M00000019" style=""><a href="news.php?id=M00000019" style="">其他分享</a></li>
          </ul>
        </div>
      </div>
    </li>
    <li align="left" tabindex="0" class="" style="z-index: 1;"><a class="top-heading" id="H00000005" aria-haspopup="true">新闻案列</a><i class="caret"></i>
      <div class="dropdown" style="transition: none 0s ease 0s ; height: auto;">
        <div class="dd-inner">
          <ul class="column">
            <li id="M00000034" style=""><a href="news.php?id=M00000034" style="">2017</a></li>
            <li id="M00000035" style=""><a href="news.php?id=M00000035" style="">2016</a></li>
            <li id="M00000036" style=""><a href="news.php?id=M00000036" style="">2018</a></li>
          </ul>
        </div>
      </div>
    </li>
    <li align="left" tabindex="0" class="" style="z-index: 1;"><a class="top-heading" id="H00000006" aria-haspopup="true">推荐</a><i class="caret"></i>
      <div class="dropdown" style="transition: none 0s ease 0s ; height: auto;">
        <div class="dd-inner">
          <ul class="column">
            <li id="M00000020" style=""><a href="news.php?id=M00000020" style="">举报不良内容</a></li>
            <li id="M00000021" style=""><a href="news.php?id=M00000021" style="">软体推荐</a></li>
            <li id="M00000022" style=""><a href="news.php?id=M00000022" style="">性上瘾检测表</a></li>
            <li id="M00000023" style=""><a href="news.php?id=M00000023" style="">祷告文</a></li>
            <li id="M00000024" style=""><a href="news.php?id=M00000024" style="">网络安全研习会表格下载</a></li>
            <li id="M00000025" style=""><a href="news.php?id=M00000025" style="">关怀同性恋者辅导员培训会表格下载</a></li>
          </ul>
        </div>
      </div>
    </li>
    <li align="left" tabindex="0" class="" style="z-index: 1;"><a class="top-heading" id="H00000007" aria-haspopup="true">关于我们</a><i class="caret"></i>
      <div class="dropdown" style="transition: none 0s ease 0s ; height: auto;">
        <div class="dd-inner">
          <ul class="column">
            <li id="M00000026" style=""><a href="news.php?id=M00000026" style="">计划缘起</a></li>
            <li id="M00000027" style=""><a href="news.php?id=M00000027" style="">计划目标</a></li>
            <li id="M00000028" style=""><a href="news.php?id=M00000028" style="">执行单位和人力情形</a></li>
            <li id="M00000029" style=""><a href="news.php?id=M00000029" style="">执行步骤</a></li>
            <li id="M00000030" style=""><a href="news.php?id=M00000030" style="">预订执行进度</a></li>
            <li id="M00000031" style=""><a href="news.php?id=M00000031" style="">实施对象和期程,预期效益</a></li>
            <li id="M00000032" style=""><a href="news.php?id=M00000032" style="">XOX标志</a></li>
          </ul>
        </div>
      </div>
    </li>
    <li id="recmd" class="no-sub" style="color: unset; background-color: unset;">
      <a class="top-heading" href="news.php?id=news.php?id=R" style="vertical-align: middle;">
        <p1 style="color: rgb(231, 255, 0);">推</p1>
        <p2 style="color: rgb(0, 237, 255);">荐</p2>
      </a>
    </li>
    <li class="no-sub" id="news.php?id=A"><a class="top-heading" href="news.php?id=news.php?id=A">关于我们</a></li>
  </ul>

</nav>