javascript - 获取li项的state最大值

Question

假设我有一个无序列表的选项卡，如下所示:

<ul>
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ul>

现在，我正在根据点击将列表设为事件列表。因此，当用户单击li时，它将被标记为事件状态并且 this.state.selected将等于 li 的数量。例如，单击第一个 li , this.state.selected将等于 1等等。

有没有可能找到maximum state的方法？可以选择吗？

例如，如果 ul有三个li标签，然后 maximum state对于 selected将是3 .

Answer 1

假设this是对 <ul> 的引用，我建议:

this.state.maximum = this.children.length;

或者，如果可能有子项不被计算在内，您可以将 CSS 选择器传递给 querySelectorAll()仅检索您想要查找的子项:

this.state.maximum = this.querySelectorAll('li.classToFind').length;

或者，您可以使用Array.prototype.filter()根据元素节点的属性仅保留那些您希望计数的元素，例如仅保留“keep”属性等于“true”的那些元素节点(作为简单演示):

// Array.from() turns the NodeList returned by this.children
// into an array, in order to easily use the methods of the
// Array prototype,
// Array.prototype.filter() is used to filter out those elements
// for which the assessment in the anonymous function returns a
// false, or falsey, value:
this.state.maximum = Array.from( this.children ).filter(
  function(node){
    return node.keep === true;
  }).length;

或者，重写上面的内容以使用箭头函数:

this.state.maximum = Array.from( this.children )
                          .filter( n => n.keep === true ).length;