javascript - 如何使用 jQuery 选择具有特定文本的中间节点:包含选择器?
问题描述
我想获取包含特定文本的 html 元素,我使用了:contains
选择器。但是,我没有获得目标节点。
在此示例中,我试图获取所有具有“今天?”的元素 文本,即使它与其他内联元素(如<a>
、<span>
、<sup>
等)分开。
所以我期待结果:DIV.some-class, P.another-class
//let results = $(':contains(today?):not(:has(*))')
let results = $(":contains('today?')").not("script")
results.each(function() {
console.log(`${this.tagName}${this.className ? '.' + this.className : ''}`)
})
/**
prints HTML, BODY, DIV.content, DIV.some-class, P.another-class
*/
console.log()
let results2 = $(":contains('today?')").not("script").children().filter(function() {
return ($(this).text().indexOf("today?") > -1)
}).get()
results2.forEach(r => {
console.log(`${r.tagName}${r.className ? '.' + r.className : ''}`)
})
/**
prints BODY, DIV.content, DIV.some-class, P.another-class
*/
console.log()
let results3 = $(":contains('today?')").not("script").filter(function() {
return (
$(this).clone() //clone the element
.children() //select all the children
.remove() //remove all the children
.end() //again go back to selected element
.filter(":contains('today?')").length > 0)
}).get();
results3.forEach(r => {
console.log(`${r.tagName}${r.className ? '.' + r.className : ''}`)
})
/**
prints P.another-class
*/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='content'>
<div class='some-class'>
Hello world! How are you<a> doing today</a>?
</div>
<div class='some-other-class'>
Bye world!
</div>
<p class='another-class'>
Any <b>plans</b> for today?
</p>
</div>
解决方案
您可以使用 children() 并包含一个选择器。这是一个有效的解决方案:
var elements = $('.content').children().filter(":contains('today?')");
var result = $.map(elements, function (el) {
return `${el.tagName}${el.className ? '.' + el.className : ''}`;
});
console.log(result.join(', '));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='content'>
<div class='some-class'>
Hello world! How are you<a> doing today</a>?
</div>
<div class='some-other-class'>
Bye world!
</div>
<p class='another-class'>
Any <b>plans</b> for today?
</p>
</div>
推荐阅读
- scala - 有没有办法让 scala 代码忽略 ssl 验证?
- c# - 实体框架:当我按确切的日期时间过滤时,出现错误
- c - LLVM 解释器 (lli) 和共享对象加载
- android - how to get the deleted contact from the android phone and how to restore it
- node.js - NodeJs Mongodb:连接 ECONNREFUSED
:27017 - python - Plotly:如何使用 bx.bar 更改颜色条的标题?
- javascript - JavaScipt:将 HTML 实体作为函数参数传递
- python - 如何获取烧瓶中的最后一个条目
- python-3.x - 将带有参数的python函数应用于apache光束管道
- c# - 如何从管理端获取数据然后在客户端显示?