如何知道 DOM 树中的元素个数

Question

我有ul ，我想知道这些列表项的数量（例如：番茄的数量是 3）。

<li>Apple</li>
<li>Orange</li>
<li>Tomato</li>
<li>Potato</li>

我怎样才能做到这一点？

UPD 我也在使用 vue js 和 v-for 进行列表渲染。

UPD2 当我选择它们时，我真正想要的是一个获取活动列表数量的数组。

我是这样做的：

let selectedlist = document.getElementsByClassName('selected')
  let list = document.getElementsByTagName('li')
  this.indexOfSelectedLists = [] // array that i need
  for (let i = 0; i < list.length; i++) {
    for (let j = 0; j < selectedlist.length; j++) { // because findIndex() isnt supported
      list[i].innerHTML === selectedlist[j].innerHTML
        ? this.indexOfSelectedLists.push(i)
        : null
    }
  }

Answer 1

不需要任何javascript代码。 v-for可以处理你想要的。

如果你像这样定义你的v-for ： <li v-for="(fruit, index) in fruits"> ， index会给你索引号，你可以将它打印为{{ index + 1 }}

来自文档网站的示例。

Answer 2

您可以使用querySelectorAll()获取元素，并使用forEach()显示元素及其索引（数字）：

var list = document.getElementById("myList");
var elements = Array.from(list.querySelectorAll("li"));

elements.forEach(function(li, index) {
  console.log(li.innerText + " is number " + (index + 1));
});

演示：

 var list = document.getElementById("myList"); var elements = Array.from(list.querySelectorAll("li")); elements.forEach(function(li, index) { console.log(li.innerText + " is number " + (index + 1)); });

 <ul id="myList"> <li>Apple</li> <li>Orange</li> <li>Tomato</li> <li>Potato</li> </ul>

Answer 3

您可以找到任何元素的索引，请查看示例。

 var findIndex = "Tomato"; $("ul li").each(function(index, item) { if($(item).text() == findIndex){ console.log("Index of " + findIndex + " is: " + (index + 1)); } });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li>Apple</li> <li>Orange</li> <li>Tomato</li> <li>Potato</li> </ul>

Answer 4

如果您尝试在v-for循环中呈现索引，您可以使用v-for="(item, index) of items"然后访问{{index}} ：

 new Vue({ el: '#app', data() { return { items: [ 'Apple', 'Orange', 'Tomato', 'Potato' ], } } })

 <script src="https://unpkg.com/vue@2.5.2"></script> <div id="app"> <ul> <li v-for="(item, index) of items">{{index}} - {{item}}</li> </ul> </div>

^{请参阅Vue 的列表渲染指南}