Выбор дочернего узла по внутреннему тексту из NodeList - PullRequest
Новая
       32

Выбор дочернего узла по внутреннему тексту из NodeList

0 голосов
/ 10 октября 2019

Первая часть [решено]

С учетом этого HTML 

    <div id="search_filters">
     <section class="facet clearfix"><p>something</p><ul>...</ul></section>
     <section class="facet clearfix"><p>something1</p><ul>...</ul></section>
     <section class="facet clearfix"><p>something2</p><ul>...</ul></section>
     <section class="facet clearfix"><p>something3</p><ul>...</ul></section>
     <section class="facet clearfix"><p>something4</p><ul>...</ul></section>
    </div>

Я могу выбрать весь раздел с помощью

const select = document.querySelectorAll('section[class^="facet clearfix"]');

Результатсписок узлов с 5 дочерними элементами.

То, что я пытаюсь выполнить, - это выбрать только раздел , содержащий строку "thing3 ".

Это моя первая попытка: 

`const xpathResult = document.evaluate( //section[p[contains(.,'something3')]],
        select,  null, XPathResult.ANY_TYPE, null );

Как я могу отфильтровать выделение, чтобы выбрать только узел , который мне нужен?

Вторая часть:

Извините, что обновляювопрос, но, похоже, это проблема из моего фактического навыка. Теперь, когда я получил узел, мне нужно работать над тем, что я должен сделать, это установить пользовательский порядок li в разделах: 

<ul id="" class="collapse">
  <li>
   <label>
    <span>
     <input>
      <span>
       <a> TEXT
       </a>
      </span>
     </input>
    </span>
   </label>
  </li>
<li>..</li>

Предполагая, что существует n

с n различными текстами, и у меня есть собственные приказы, которым я буду следовать, я думаю, что лучший способ это сделать - посмотреть на внутреннюю вершину и сопоставить ее с массивом, в котором я установил правильный порядок. 
var sorOrder = ['text2','text1','text4','text3']

Ответы [ 3 ]

1 голос
/ 10 октября 2019

Я думаю, что этот подход должен привести вас к решению. Предоставляя ваш HTML 

<div id="search_filters">
 <section class="facet clearfix"><p>something</p><ul>...</ul></section>
 <section class="facet clearfix"><p>something1</p><ul>...</ul></section>
 <section class="facet clearfix"><p>something2</p><ul>...</ul></section>
 <section class="facet clearfix"><p>something3</p><ul>...</ul></section>
 <section class="facet clearfix"><p>something4</p><ul>...</ul></section>
</div>

Я бы написал это js 

const needle = "something3";
const selection = document.querySelectorAll('section.facet.clearfix');
let i = -1;

console.info("SELECTION", selection);
let targetIndex;
while(++i < selection.length){
  if(selection[i].innerHTML.indexOf(needle) > -1){
    targetIndex = i;
  }
}
console.info("targetIndex", targetIndex);
console.info("TARGET", selection[targetIndex]);

Тогда вы сможете играть и менять элементы, не удаляя их из DOM.

PS. Поскольку вы знаете классы CSS для элементов, вам не нужно использовать селектор ^* (начните с). Я также улучшил это.

ЧАСТЬ 2: упорядочение дочерних элементов li на основе содержимого 

const ul = selection[targetIndex].querySelector("ul"); // Find the <ul>
const lis = ul.querySelectorAll("li"); // Find all the <li>
const sortOrder = ['text2', 'text1', 'text4', 'text3'];
i = -1; // We already declared this above
while(++i < sortOrder.length){
    const li = [...lis].find((li) => li.innerHTML.indexOf(sortOrder[i]) > -1);
    !!li && ul.appendChild(li);
}

Это переместит элементы, которые вы хотите (только один из перечисленных в sortOrder) в нужном вам порядке, исходя из содержания и позиции в sortOrder.

Codepen Here

0 голосов
/ 10 октября 2019

Чтобы использовать функцию более высокого порядка, такую ​​как фильтр, в вашем списке узлов, вы должны изменить его на массив. Вы можете сделать это, уничтожив: 

var select = document.querySelectorAll('section[class^="facet clearfix"]');

const filtered = [...select].filter(section => section.children[0].innerText == "something3")

Этот ответ лучше объясняет магию, стоящую за ним.

0 голосов
/ 10 октября 2019

Этот список можно отфильтровать как:

  • Элементы DOM: 
Array.from(document.querySelectorAll('section[class^="facet clearfix"]')).filter(_ => _.querySelector('p').innerText === "something3")
  • HTML-строки: 

Array.from(document.querySelectorAll('section[class^="facet clearfix"]')).filter(_ => _.querySelector('p').innerText === "something3").map(_ => _.outerHTML)

:)

...