Как упростить код?

Question

[Максим К]

Есть рабочий кусок кода, как его можно упростить?
Структура запроса сохранена, названия селекторов изменил:

document.querySelector('#selcheckbox > ul > li:nth-child(1) > div > ui-state > span').click();
document.querySelector('#selcheckbox > ul > li:nth-child(2) > div > ui-state > span').click();
document.querySelector('#selcheckbox > ul > li:nth-child(3) > div > ui-state > span').click();
document.querySelector('#selcheckbox > ul > li:nth-child(4) > div > ui-state > span').click();
document.querySelector('#selcheckbox > ul > li:nth-child(5) > div > ui-state > span').click();

Answer 1

[Вадим]

А почему только до 5ти?

var items = document.querySelectorAll('#selcheckbox > ul > li > div > ui-state > span')
for (var i = 0, len = Math.min(items.length, 5); i < len; i+=1) {
  items[i].click()
}

//Math.min(items.length, 5) на случай если окажется меньше 5ти элементов.

Если их всегда 5 или нужно нажимать на все, то так можно ещё короче:

document.querySelectorAll('#selcheckbox > ul > li > div > ui-state > span').forEach(function(i){
  i.click()
})

UPD: на основе предложения выше для первых 5ти получаем:

document.querySelectorAll('#selcheckbox > ul > li:nth-child(-n+5) > div > ui-state > span').forEach(function(i){
  i.click()
})

p.s. клик на спане это фиаско. Кнопки где?

Comments

[Максим К]

Кнопок нету ))). Кол-во всегда постоянно.

[Сергей Соколов]

правильно таки (-n + 5) для первых пяти.
Это jsFiddle сбил с толку, добавив свой невидимый элемент.
Обновил фиддл, всё как в документации: :nth-child(-n + 5) выбирает первые 5

Answer 2

[Денис Дерепко]

Вынести в переменную кол-во наследников и подставлять индекс в цикле

Либо попробуйтеli:nth-child(-n+6)

https://developer.mozilla.org/ru/docs/Web/CSS/:nth...

Comments

[Сергей Соколов]

(-n+5) – первые 5, как пишет документация

[Сергей Соколов]

[Денис Дерепко]

Сергей Соколов, Благодарю, исправил ответ

[Сергей Соколов]

Денис Дерепко, не не, это косяк jsFiddle, видимо: они вставляют свой элемент и он сбивает всё.
Обновил фиддл без динамической генерации элементов, всё работает как в документации!
(А я уж было бросился писать баг-репорт в документацию ))