我想知道以下代码的功能是什么

debugcn 发表于 Dev

维卡斯·拉蒂

我想了解以下 jquery 代码将返回什么？

$(`:contains("keyword"):not(:has(:contains("keyword")))`)

某些表演

查看文档：

描述：选择包含至少一个与指定选择器匹配的元素的元素。

$( "div:has(p)" )如果 a<p>存在于其后代中的任何位置，而不仅仅是作为直接子代，则表达式匹配 a 。

因此，:contains("keyword"):not(:has(:contains("keyword")))将选择其中包含一个元素keyword，但不具有任何后代包含keyword。换句话说，keyword必须在父级中，但不能在父级的任何子级中。例如：

const match = $(`div:contains("keyword"):not(:has(:contains("keyword")))`);
console.log(match.length);
console.log(match[0]);
console.log(match[1]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="1" class="outer">
  keyword
  <div id="2" class="inner">
  </div>
</div>

<div id="3" class="outer">
  <div id="4" class="inner">
    keyword
  </div>
</div>

它选择第一个，.outer因为它.outer有一个直接的文本节点后代keyword。它选择第二个.inner是因为它还有一个直接的文本节点后代keyword。

选择器要求它keyword位于作为所选父元素的子元素的文本节点中。

您可以使用像这样的 vanilla DOM 方法来模拟选择器：

const match = [...document.querySelectorAll('div')]
  .filter(
    elm => [...elm.childNodes]
      .filter(({ nodeType }) => nodeType === 3) // Only look through text nodes
      .some(({ textContent }) => textContent.includes('keyword'))
  );
console.log(match.length);
console.log(match[0]);
console.log(match[1]);

<div id="1" class="outer">
  keyword
  <div id="2" class="inner">
  </div>
</div>

<div id="3" class="outer">
  <div id="4" class="inner">
    keyword
  </div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。