Question

我有ul，我想知道这些列表项中的任何一个的数量（例如：Tomatoe＆＃39;的数字是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 }}

an example来自文档网站。

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));
});

<强>演示：

＆＃13;

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));
});

＆＃13;

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

＆＃13;

Answer 3

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

＆＃13;

<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>

＆＃13;

$ for f in WP*_?_?.TXT
do
    echo "+++++++ $f"
    cat $f
    echo ""
done

+++++++ WP2024078_191_FACETS_DAILY_CLAIMS_EXTRACT_20171110094055_3_1.TXT
2024916 header

+++++++ WP2024078_191_FACETS_DAILY_CLAIMS_EXTRACT_20171110094055_3_2.TXT
2024916 data

+++++++ WP2024078_191_FACETS_DAILY_CLAIMS_EXTRACT_20171110094055_3_3.TXT
2024916 trailer

+++++++ WP2024916_191_FACETS_DAILY_CLAIMS_EXTRACT_20171110094055_7_1.TXT
2024078 header

+++++++ WP2024916_191_FACETS_DAILY_CLAIMS_EXTRACT_20171110094055_7_2.TXT
2024078 data

+++++++ WP2024916_191_FACETS_DAILY_CLAIMS_EXTRACT_20171110094055_7_3.TXT
2024078 trailer

＆＃13;

Answer 4

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

^{请参阅Vue's Guide for List Rendering}

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

4 个答案: