CODEWITHSUNDEEP
javascriptjquery
Jake
Jake

Reputation: 225

jQuery selector not selecting object

So I have some HTML.

<td class="qDescription">
    <div>
         <div id="questionTitle">% of users who logged in per day</div>
         <div id="timeRangeExt"> 05 Mar 2015 - 11 Mar 2015</div>
         <div class="compareToLabel"> (26 Feb 2015 - 04 Mar 2015)</div>
    </div>
</td>

I'm trying to change the CSS property of #timeRangeExt, so I have the following jQuery:

$("#timeRangeExt").html("TESTING");

However, it doesn't work. I'm really at a loss here. I've done this 1000 times before, but this time it just won't select.

Upvotes: 0

Views: 64

Answers (2)

Ahmad Harb
Ahmad Harb

Reputation: 615

there is a typo in your code and it should be like 

$("#timeRangeExt").html("TESTING");

Upvotes: 0

Brad Christie
Brad Christie

Reputation: 101614

Need to reference the complete id (#timeRangeExt):

$('#timeRangeExt').css('color','#f0f');

It appears it was a typo. If you have two IDs with the same value (if qDescription is a repeated element) you're going to have to use a class name instead. HTML cannot have two IDs with the same name on a single document. For example, switch it up to:

<td class="qDescription">
    <div>
         <div class="questionTitle">% of users who logged in per day</div>
         <div class="timeRangeExt"> 05 Mar 2015 - 11 Mar 2015</div>
         <div class="compareToLabel"> (26 Feb 2015 - 04 Mar 2015)</div>
    </div>
</td>

Then you can select it in reference to .qDescription:

$('.qDescription .timeRangeExt').css('color','#f0f');

Another options is, if it's dynamically laid out, is to add an incrementing value (e.g. el.id = 'timeRangeExt' + increment;) then, of course, reference it by its new id ($('#timeRangeExt2').css(...)).

Upvotes: 1

Related Questions