JQuery搜索关键字和样式最接近指定的html元素

Question

我正在构建一个Chrome扩展，突出显示特定的关键字。

假设我在一个结构如下的网站上:

<div class="container">
    <div class="one">
        <h1>Title</h1>
        <p>Specific keyword.</p>
    </div>
    <div class="two">
        <h1>Another Title</h1>
        <p>Some copy.</p>
    </div>
</div>

下面的JQuery将搜索术语"特定关键字"，并为每个<div>应用一个背景色。

$( "div:contains('specific keyword')" ).css( "background-color", "red" );

相反，我想搜索关键字，只将样式应用到最接近指定的html元素，例如在这种情况下class="one"。这可能吗?

Answer 1

使用最近()

$( "div:contains('specific keyword')" ).closest(".one").css( "background-color", "red" );

或者如果你总是想要直接父节点，通常使用parent()

$( "div:contains('specific keyword')" ).parent().css( "background-color", "red" );

Answer 2

尝试添加大于:

$( "div>:contains('specific keyword')" ).css( "background-color", "red" );

这将只针对最接近关键字的div(而不是容器)。

知道contains是大小写敏感的也是有用的，所以如果你想使它不区分大小写，你可以添加这个:

$.expr[":"].contains = $.expr.createPseudo(function(arg) {
    return function( elem ) {
        return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
    };
});

Answer 3

最简单的解决方案不是使用父选择器吗?

$("div:contains('specific keyword')").parent().css( "background-color", "red" );

父选择器也可以采用选择器

$("div:contains('specific keyword')").parent(".one").css( "background-color", "red" );