1

使用 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有没有更好的方法来实现目标？

提前谢谢了。

编辑

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

4

2 回答 2

3

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

$("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");

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

于 2012-11-27T11:57:18.460 回答
2

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

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

一个很好的读物是这样的：jQuery 选择器

于 2012-11-27T11:57:29.867 回答