Using variable within JQuery selector

Question

I have some code that saves a selector in a variable, which when testing works fine the first time I reference it (line 2 of my code), but when I try to add an h1 to it, seen on line 3 of my code, I get the following error: "Uncaught Error: Syntax error, unrecognized expression: [object Object] h1"

How can I add an h1 to my variable in the selector without getting an error?

var $tabContentHeader = $('.tab-content-header');
var $headerLineHeight = $($tabContentHeader).height() + 10 + 'px';
$($tabContentHeader + ' h1').css({'line-height': $headerLineHeight});

HTML:

<div class="row tab-content-header">
    <img src="images/content-area/page-header.png" class="img-responsive" alt="a1">
    <h1>Welcome</h1>
</div>

There's no need for the second jQuery wrap: $($tabContentHeader). Just stay with $tabContentHeader — Andreas
– Andreas, Commented Oct 7, 2015 at 14:52

Frédéric Hamidi · Accepted Answer · 2015-10-07 14:54:14Z

1

var $tabContentHeader = $('.tab-content-header');
var $headerLineHeight = $($tabContentHeader).height() + 10 + 'px';
$tabContentHeader.find('h1').css({'line-height': $headerLineHeight});

edited Oct 7, 2015 at 14:54

Frédéric Hamidi

264k42 gold badges497 silver badges486 bronze badges

answered Oct 7, 2015 at 14:50

Diptox

1,80912 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Bryan Over a year ago

This looks to be exactly what I was looking for. Thank you.

Bryan Over a year ago

I have several instances of .tab-content-header h1, but this code appears to only change the first instance of it. How can I alter the code to get it to change all instances of .tab-content-header h1 at once?

Collectives™ on Stack Overflow

Using variable within JQuery selector

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related