Question

使用jQuery，我可以通过向元素添加css来突出显示单个HTML元素，如下所示：

$("div:contains('simple')").css("border", "4px solid blue");

我想知道我是否可以同时突出显示多个元素，例如

<h2>A title here</h2>
<div>Some content here</div>
<h2>A another title here</h2>
<div>Some more content here</div>

如何与第一个h2一起突出显示第一个div？

我知道我可以创建父div来保存元素，但新创建的div可能会影响原始布局，例如

<p>I want to highlight <span>this</span> <strong>and this</strong></p>

我需要根据上下文为父display设置div属性，对吧？有没有更好的方法来实现目标？

非常感谢提前。

修改

我可以为这两个元素获得一个高亮框（或其他高光效果，如背景）吗？

Answer 1

您可以使用逗号分隔不同的选择器：

$("div:contains('simple'), h2:contains('simple')").css("border", "4px solid blue");

以下是这方面的文档： http://api.jquery.com/multiple-selector/

我可以获得一个高亮显示框（或其他高亮效果，如背景）这两个元素？

这在很大程度上取决于你的HTML。以你的h2 / div为例，一旦H2和div具有相同的宽度，你可以看起来它有共同的边框： CSS：

div.highlighted, h2.highlighted {
   border:4px solid blue;
}
div.highlighted {
    border-top:none;/*remove top border for a div*/
}
div.highlighted {
    border-bottom:none;/*remove bottom border for a h2*/
}

而不是JS：

$("div:contains('simple'), h2:contains('simple')").addClass("highlighted");

在其他情况下，您可能需要做其他事情。

Answer 2

有几种方法可以实现这一目标。一种方法是将类添加到第一个h2和div，并将其用作选择器：

$(".class-name-that-you-have-added").css("border", "4px solid blue");

好的阅读是：jQuery selectors

使用Javascript突出显示多个HTML元素

2 个答案: