如何使用 jQuery 选择具有特定文本的中间节点：包含选择器？答案

【问题标题】：How to select middle nodes with specific text using jQuery :contains selector?如何使用 jQuery 选择具有特定文本的中间节点：包含选择器？
【发布时间】：2021-02-23 00:13:05
【问题描述】：

我想获取包含特定文本的 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>

【问题讨论】：

您可能会在这里得到一些想法。 stackoverflow.com/questions/21172170/…

标签： javascript html jquery dom

【解决方案1】：

您可以使用 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>

【讨论】：