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将搜索术语＆＃34;特定关键字＆＃34;并为每个<div>应用背景颜色。

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

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

Answer 1

使用closest()

$( "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定位到关键字（而不是容器）。

知道包含区分大小写也很有用，所以如果你想让它不区分大小写，你可以添加它：

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

Answer 3

最简单的解决方案不是使用parent选择器。

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

父选择器也可以选择

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

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

3 个答案: