javascript - 如何使用jQuery选择叶节点 :contains selector?

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>

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

如何只选择目标？

p.s 以上 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>