querySelector после определенного элемента

Есть ли способ выбрать элементы, появляющиеся после данного элемента с помощью селекторов CSS.querySelector после определенного элемента

Предположим, у меня есть DOM, как этот

<body> 
    <span class="next">A next span</span> 
    <div> 
    <span class="next target">the target next span</span> 
    </div> 
    <div> 
    <span class="next">this is the one I want to select</span> 
    </div> 
</body>

Я хочу, чтобы выбрать span S класса next, но только те, которые появляются после span.next.target. Что делает этот сложный процесс, так это то, что им не нужно быть братьями и сестрами или под одним и тем же родительским узлом, но может появляться где угодно в DOM.

Возможно ли это, или я обречен придерживаться цикла петли?

источник

2013-12-06 sitifensys

Невозможно; поскольку нет селектора CSS, который может выбирать родителей. –

Я знаю, что еще нет родительских селекторов css, я спрашиваю, нет ли другого метода, который для цикла for выбирает следующий элемент, используя данный класс. – sitifensys

Ближайшей вещью будет селектор _next sibling (http://api.jquery.com/next-siblings-selector/) Но вы не работаете с братьями и сестрами. Итак, '$ ('. Next'). Each (...)' и извлекать их после '.hasClass ('target')'. –

Вы можете использовать обычный JavaScript для этого:

'use strict'; 

console.clear(); 
const spanNextNodes = document.querySelectorAll('div span.next'); 

let find = function*(nodes) { 
    let isNextTargetFound = false, 
     arrayOfNodes = Array.prototype.slice.call(nodes);  // untill spread operator is supported [...nodes], we have to use slice method 

    for (let n of arrayOfNodes) { 
     if (isNextTargetFound) { 
      yield n; 
     } else if (n.classList.contains('target')) { 
      isNextTargetFound = true; 
     } 
    } 
} 

for (let item of find(spanNextNodes)) { 
    console.log(item); 
}

Here is an example Он основан на стандартах ES2015 с использованием функциональных генераторов (выход), но если вы хотите использовать ES5 вы можете добавлять элементы в массив и вернуть массив вместо.

источник

2016-01-09 19:28:53

querySelector после определенного элемента

ответ

Смежные вопросы