使用javascript在网页上显示li项目的数量

Question

我有一个

<ul id="listofitems"></ul>

我使用javascript添加li项目。 我想使用javascript在页面顶部的列表中显示项目数。我怎么能这样做？

Answer 1

虽然我建议Satpal's answer可能就是你应该选择的那个，但可以做这个 - 带有一些小的警告 - 纯粹是CSS和HTML：

#listofitems {
  /* the user-defined counter we're using
     to number the list-items within this list: */
  counter-reset: listCount;
}
#listofitems li {
  /* incrementing that counter in each <li>: */
  counter-increment: listCount;
}

#listofitems li:last-child::before {
  /* showing the counter: */
  content: counter(listCount);
  /* positioning it absolutely (this
     is the main caveat): */
  position: absolute;
  /* setting the position to show: */
  top: 0;
  right: 3em; /* just to move from behind the 'full screen'/'back' box */
  /* aesthetics, irrelevant to the demo
     adjust to taste: */
  display: block;
  text-align: center;
  font-size: 2em;
  border: 2px solid #000;
  width: 2em;
  height: 2em;
  line-height: 2em;
  background-color: #fff;
}

<ul id="listofitems">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

至于警告，这是在元素上使用position: absolute的问题，因为它将相对于第一个祖先元素定位，position属性值设置为{{1}以外的任何值1}}（默认值），因此如果祖先的位置设置为static，relative，fixed，那么它将导致absolute伪元素定位与那个元素有关。

Answer 2

您可以使用document.querySelectorAll查找元素，然后获取length属性。

  

document.querySelectorAll返回文档中的元素列表（使用与指定选择器组匹配的文档节点的深度优先预先遍历）。返回的对象是NodeList。

码

document.querySelectorAll('#listofitems li').length

＆＃13;

＆＃13;

window.onload = function() {

  alert(document.querySelectorAll('#listofitems li').length);

}

＆＃13;

<ul id='listofitems'>
  <li>1</li>
  <li>2</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 3

document.getElementById 支持，明显快于querySelectorAll 。您可以改为使用它：

document.getElementById('list').getElementsByTagName('li').length;

这支持IE6 +，基本上是每个浏览器。

window.onload = function() {
  var elements = document.getElementById('listofitems').getElementsByTagName('li').length;

  document.getElementById('result').innerHTML = 'They are ' + elements + ' li in the list';
};

<ul id="listofitems">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<div id="result"></div>

为什么要使用它？

• 这是由远景 faster performance
• 支持没问题