如何使用jQuery选择叶子节点：包含选择器？

Question

我想获取包含特定文本的叶子元素，并使用了:contains选择器。 但是，此选择器也会选择包括每个父节点。 这是我的例子。

<div id='parent1'>
    <p id='target1'>Red balloon</p>
    <div id='target2'>Blue balloon</div>
</div>
<div id='parent2'>
    <span id='target3'>Brown balloon</span>
</div>

. 在这种情况下，我只想获取包含文本元素。 . 我期望通过$(":contains('balloon')")获得3个元素（ target1 ， target2 ， target3 $(":contains('balloon')") ，但是它返回每个节点，包括父节点。 （例如html ， body和每个父div ）

? 如何仅选择 ？

ps HTML以上只是示例。 HTML可以有所不同，因此答案应该是通用的。

Answer 1

1. 使用indexOf("balloon") > -1查找找到单词balloon ID

 var arr = $("div").children().map(function(){ if($(this).text().indexOf("balloon") > -1 ) return $(this).attr("id") }).get(); console.log(arr) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id='parent1'> <p id='target1'>Red balloon</p> <div id='target2'>Blue balloon</div> </div> <div id='parent2'> <span id='target3'>Brown balloon</span> </div> 

Answer 2

下面的解决方案，查找包含单词的所有元素并克隆这些元素，这样我们就可以确保仅获得“正确”数量的元素

只需删除.length访问元素。

 var s = $(":contains('balloon')").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('balloon')").length > 0) }).length; console.log(s) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id='parent1'> <p id='target1'>Red balloon</p> <div id='target2'>Blue balloon</div> </div> <div id='parent2'> <span id='target3'>Brown balloon</span> </div>