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

【问题标题】：How to know number of element in a DOM tree如何知道 DOM 树中的元素个数
【发布时间】：2018-04-24 20:49:59
【问题描述】：

我有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
    }
  }

【问题讨论】：

如果你澄清你想要什么可能会有所帮助。人们给出了基于 DOM 的答案，而在 Vue 中你真的不想这样做。
@Bert 更新了图片和我的决定

标签： javascript html vue.js frontend

【解决方案1】：

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

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

an example 来自文档网站。

【讨论】：

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案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's Guide for List Rendering}

【讨论】：