javascript - 通过 NodeList 中的内部文本选择子节点

Question

第一部分 [已解决]

鉴于此 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 个子节点的节点列表。

我想要完成的是只选择包含“something3”字符串的部分。

这是我的第一次尝试：

`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个不同的文本，我有一个自定义的订单要遵循我认为最好的方法是查看innertex并与我设置正确顺序的数组匹配。

var sorOrder = ['text2','text1','text4','text3']

Answer 1

我认为这种方法应该会引导您找到解决方案。提供您的 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 类，因此您不需要使用^*(start with) 选择器。我也对此进行了改进。

PART 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。

在这里写代码

Answer 2

您可以将该列表过滤为：

• 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)

:)

Answer 3

为了在节点列表上使用过滤器等高阶函数，您必须将其更改为数组。你可以通过解构来做到这一点：

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

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

这个答案更好地解释了它背后的魔力。