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的{{1}}将为selected。

Answer 1

是否有可能找到可能的最大状态   选择？

例如，如果ul有三个li标签，那么最大状态为   选中将是3。

那么，你想找出IOException的孩子数量吗？

ul

这么多代码应该

<ul id="ul1">
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ul>

Answer 2

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

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

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

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

或者，您可以使用Array.prototype.filter()根据元素节点的属性仅保留您希望计算的元素，例如，仅保留具有＆＃39; keep＆＃39属性的元素节点。 ;等于＆＃39; true＆＃39; （作为一个简单的演示）：

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

获取li项目的最大状态值

2 个答案: