Как выбрать узлы между элементами, если они вложены в разных родителей

201

01 марта 2018, 14:09

Мне необходимо собрать массив из узлов, которые находятся между двумя элементами-метками, находящимися в разных родителях. Допустим, мне нужны параграфы.

<p>Первый <span class="before"></span>параграф с каким-то текстом</p>
<p>Второй параграф с каким-то текстом</p>
<p>Третий параграф с каким то текстом</p>
<p>Четвертый параграф <span class="after"></span> с каким-то текстом</p>

В результате мне нужно получить массив из второго и третьего параграфов. Если элемент не полностью находится между метками - он исключается. nextUntil из Jquery не помог - узлы-метки при такой дислокации тупо не видят контент между собой.

Answer 1

Как вариант можно попробовать следующую конструкцию :

function findNodesBetweenElements(selector, startNode, endNode) { 
    let paragraphs = Array.from(document.querySelectorAll(selector)); 
    let range = document.createRange(); 
    range.setStartAfter(startNode); 
    range.setEndBefore(endNode); 
    let result = paragraphs.filter((item) => { return range.intersectsNode(item) }); 
    return result 
} 
let p = Array.from(document.querySelectorAll('p')); 
result = findNodesBetweenElements('p', p[0], p[p.length - 1]); 
console.log(result);

<p>Первый 
<span class="before"></span> 
параграф с каким-то текстом</p> 
<p>Второй параграф с каким-то текстом</p> 
<p>Третий параграф с каким то текстом</p> 
<p>Четвертый параграф <span class="after"></span> с каким-то текстом</p>

Функция принимает в параметры сss селектор и две ноды, между какими происходит поиск, для примера я добавил первый и последний параграф, при желании можно бросать туда любые ноды. Но ,например, если нода искомая лежит внутри исключаемой то она будет включена в результат.