添加括号后代计数到每个列表项（LI）。跳过那些里面没有其他列表项的LI

Question

function f() {
  var count = document.getElementById('t1').childElementCount;
  alert(count);
  for (var i = 0; i < count.length; i++) {
    alert("[" + i + "]");
  }
}

<ul>
  <li>About Animals
    <ul id="t1" onclick="f()">
      <li>Mammals
        <ul id="t2" onclick="f()">
          <li>Cows</li>
          <li>Donkeys</li>
          <li>Dogs</li>
          <li>Tigers</li>
        </ul>
      </li>

      <li>Others
        <ul id="t3" onclick="f()">
          <li>Snakes</li>
          <li>Birds</li>
          <li>Lizards</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>About Fish
    <ul id="t4" onclick="f()">
      <li>About Aquarium Fishes
        <ul id="t5" onclick="f()">
          <li>Guppy</li>
          <li>Scalare</li>
        </ul>
      </li>
      <li>Sea Fish
        <ul id="t6" onclick="f()">
          <li>Sea Trout</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

以上是我的代码，但它没有显示任何输出。我希望代码以下面的方式显示。

• 关于动物[9]
  
  • 哺乳动物[4]
    • 奶牛
    • 驴
    • 狗
    • 老虎
  • 其他[3]
    • 蛇
    • 鸟
    • 蜥蜴
• 关于鱼类[5]
  • 关于鱼缸鱼[2]
    • 顾比
    • Scalare
  • 海鱼[1]
    • 海鳟

Answer 1

您需要使用onclick="f()"

补充f(this)

使用此

添加您的功能

function f(elmnt) {
   alert(elmnt.getElementsByTagName("li").length);
}

var alladdnum =document.querySelectorAll(".addnum");
for (i = 0; i < alladdnum.length; i++) { 
  var span = alladdnum[i].getElementsByTagName("span");
  span[0].innerHTML += ' '  + alladdnum[i].getElementsByTagName("li").length;
}

<ul>
  <li class="addnum"><span>About Animals</span>
    <ul id="t1" onclick="f(this)">
      <li class="addnum"><span>Mammals</span>
        <ul id="t2" onclick="f()">
          <li>Cows</li>
          <li>Donkeys</li>
          <li>Dogs</li>
          <li>Tigers</li>
        </ul>
      </li>

      <li class="addnum"><span>Others</span>
        <ul id="t3" onclick="f()">
          <li>Snakes</li>
          <li>Birds</li>
          <li>Lizards</li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="addnum"><span>About Fish</span>
    <ul id="t4" onclick="f()">
      <li class="addnum"><span>About Aquarium Fishes</span>
        <ul id="t5" onclick="f()">
          <li>Guppy</li>
          <li>Scalare</li>
        </ul>
      </li>
      <li class="addnum"><span>Sea Fish</span>
        <ul id="t6" onclick="f()">
          <li>Sea Trout</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Answer 2

试试这个 -

<ul>
    <li class="group" onclick="f(this)"> About Animals<span class="length"></span>
        <ul id="t1"  onclick="f(this)">
            <li class="group item" onclick="f(this)">Mammals<span class="length"></span>
                <ul id="t2" onclick="f(this)">
                    <li class="item">Cows</li>
                    <li class="item">Donkeys</li>
                    <li class="item">Dogs</li>
                    <li class="item">Tigers</li>
                </ul>
            </li>

            <li class="group item" onclick="f(this)">Others<span class="length"></span>
                <ul id="t3" onclick="f(this)">
                    <li class="item">Snakes</li>
                    <li class="item">Birds</li>
                    <li class="item">Lizards</li>
                </ul>
            </li>
        </ul>
    </li>
    <li class="group item" onclick="f(this)">About Fish<span class="length"></span>
        <ul id="t4" onclick="f(this)">
            <li class="group item" onclick="f(this)">About Aquarium Fishes<span class="length"></span>
                <ul id="t5" onclick="f(this)">
                    <li class="item">Guppy</li>
                    <li class="item">Scalare</li>
                </ul>
            </li>
            <li class="group item" onclick="f(this)">Sea Fish<span class="length"></span>
                <ul id="t6" onclick="f(this)">
                    <li class="item">Sea Trout</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

 function f(element){
        if(element && element.classList.contains("group")) {
            var lengthElem = element.getElementsByClassName("length")[0];
            var itemLength = element.getElementsByClassName("item").length;
            lengthElem.textContent = "["+itemLength+"]";
        }

    }