Question

Using jQuery, I can highlight a single HTML element by adding css to the element like following:

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

I am wondering whether I can highlight multiple elements at the same time, like

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

How can I highlight the first h2 together with the first div?

I know I can create a parent div to hold the elements, but the newly created div may affect the original layout, like

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

I need to set the display property for the parent div according to the context, right? Is there a better way to achieve the goal?

Many thanks in advance.

EDIT

Can I get a single highlight box(or other highlight effect, like background) for the two elements?

Answer 1

You can separate different selectors with a comma:

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

Here are docs for this:
http://api.jquery.com/multiple-selector/

Can I get a single highlight box(or other highlight effect, like
background) for the two elements?

That depends on your HTML heavily. Taking your h2/div example you can make it look like it has common border once both H2 and div have same width:
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*/
}

and than JS:

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

In other situations you may need to do something else.