如何使用 jQuery :contains 選擇器選擇具有特定文本的中間節點？

Question

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

Answer 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>