data: () => ({
index: 0,
items: [
[ 'hello, world!!', 'fuck the world', 'fuck everything' ],
[ '69', '187', '666' ],
[ '!!!', '???', ':::' ],
[ '+++', '***', '///' ],
],
}),
<ul v-if="index < items.length" @click="index++">
<li v-for="n in items[index]">{{ n }}</li>
</ul>
<button v-else @click="index = 0">давай заново</button>
const className = 'select';
const sumEl = document.querySelector('.sum');
const sum = elements =>
Array.prototype.reduce.call(
elements,
(acc, n) => acc + (+n.value || 0),
0
);
const updateSum = () => sumEl.textContent = sum(document.getElementsByClassName(className));
document.addEventListener('change', e => e.target.classList.contains(className) && updateSum());
updateSum();
const selects = document.querySelectorAll(`.${className}`);
const updateSum = () => sumEl.innerText = sum(selects);
selects.forEach(n => n.addEventListener('change', updateSum));
updateSum();
// внутри ul с классом list ищем все li
var myNodeList = document.querySelectorAll('ul.list li');
if( myNodeList.length) { // что-то нашлось, коллекция не пустая
var el0 = myNodeList[0]; // первый
}
Рабочий примерquerySelectorAll()
есть и у документа и у элемента. Так что можно сначала получить элемент, внутри которого искать, а затем внутри него собрать коллекцию:var list = document.querySelectorAll('ul.list'); // все UL класса list в документе
if( list.length) {
var items = list[0].querySelectorAll('.list');
// любые элементы класса list внутри первого найденного ul.list
if(items.length) {
var item = items[0]; // первый из li
}
}