Получить максимальное значение состояния для элементов Li

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() сохранить только те элементы, которые вы хотите посчитать, на основе свойства узлов элементов, например, сохраняя только те узлы элементов со свойством «держать» равно «истинно» (как простая демонстрация):

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

Answer 2

Есть ли способ узнать максимально возможное состояние для ?

Пример, если уль имеет три Li-теги, то максимальное состояние для будет выбрана 3.

Итак, вы хотите узнать количество детей ul?

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

Это гораздо код должен делать

alert(document.getElementById('ul1').children.length);