我想检测其中包含“_”字符的元素的父元素这可以使用jquery和css3选择器“:contain”来实现,如下所示$('.class a:contains("_")').parent()但是我试图避免过多地使用jquery,那么有没有办法使用原生js来实现这一点呢
$('.class a:contains("_")').parent()
ohtdti5x1#
没有CSS来检查它是否包含文本。唯一可以进行文本匹配的方法是该文本是否碰巧在元素的属性中。因此,您必须选择所有父元素,并在文本/子元素的文本处循环。要做到这一点,你可以选择所有的元素,并使用过滤器来检查文本。如果你只关心有一个下划线,你可以只文本的文本内容的元素。
const elemsWithUnderscore = [...document.querySelectorAll('.yourClass')].filter(el => el.textContent.includes('_')); console.log(elemsWithUnderscore);
<div class="yourClass"><a>a</a></div> <div class="yourClass"><a>b_</a></div> <div class="yourClass"><a>c</a></div> <div class="yourClass"><a>d_</a></div> <div class="yourClass"><a>e</a></div>
如果它只能在锚标记中,并且存在一个锚标记,则可以选择锚标记。一个二个一个一个如果有多个锚点作为子锚点,那么您需要使用一些子锚点来查看其中一个是否有下划线。
const elemsWithUnderscore = [...document.querySelectorAll('.yourClass')].filter(el => el.querySelector('a')?.textContent.includes('_')); console.log(elemsWithUnderscore);
<div class="yourClass">_<a>a</a></div> <div class="yourClass"><a>b_</a></div> <div class="yourClass"><a>c</a></div> <div class="yourClass"><a>d_</a></div> <div class="yourClass"><a>e</a></div>
k3fezbri2#
您可以使用document.querySelectorAll并检查子对象的textContent。
document.querySelectorAll
textContent
[...document.querySelectorAll('.class')].filter(el => [...el.querySelectorAll('a')].some(a => a.textContent.includes('_'))) .forEach(el => console.log(el.outerHTML));
<div class="class"><a>_</a></div> <div class="class"> <div><a>abc_def</a><span>123</span></div> </div> <div><a>nothing to see</a></div>
2条答案
按热度按时间ohtdti5x1#
没有CSS来检查它是否包含文本。唯一可以进行文本匹配的方法是该文本是否碰巧在元素的属性中。因此,您必须选择所有父元素,并在文本/子元素的文本处循环。
要做到这一点,你可以选择所有的元素,并使用过滤器来检查文本。如果你只关心有一个下划线,你可以只文本的文本内容的元素。
如果它只能在锚标记中,并且存在一个锚标记,则可以选择锚标记。
一个二个一个一个
如果有多个锚点作为子锚点,那么您需要使用一些子锚点来查看其中一个是否有下划线。
k3fezbri2#
您可以使用
document.querySelectorAll
并检查子对象的textContent
。