CODEWITHSUNDEEP
javascriptjqueryhtml
Megan
Megan

Reputation: 28

Find h2 within first li only

I want jquery to target a h2 within first li of a carousel to which I will then add some css to.

As a basic example I have this so far

$('li').first().css('background-color', 'red');

Which is only targeting the li. How do I then go onto target the h2 to apply the css to? Would it be using the .find property?

I know I can do this within CSS but would like to do it in the jquery as it will have other features added to it in the jquery.

Upvotes: 0

Views: 118

Answers (3)

Manoj Yadav
Manoj Yadav

Reputation: 6612

Try this:

$('li:first h2').css('background-color', 'red');

Upvotes: 0

Zaheer Ahmed
Zaheer Ahmed

Reputation: 28578

or you can try if h2 is one level down in DOM to li:

// all h2 elements within the first li:
$('li').first().children('h2').css('background-color', 'red');

because find() multilevel which make it slow.

The .children() method differs from .find() in that .children() only travels a single level down the DOM tree while .find() can traverse down multiple levels to select descendant elements (grandchildren, etc.) as well. documented here

Upvotes: 0

nnnnnn
nnnnnn

Reputation: 150080

"Would it be using the .find property?"

Well, yes, the find() method (not property) is one way to do it:

// all h2 elements within the first li:
$('li').first().find('h2').css('background-color', 'red');
// or just the first h2 within the first li:
$('li').first().find('h2').first().css('background-color', 'red');

Upvotes: 4

Related Questions