CODEWITHSUNDEEP
javascriptjquery
Shauny
Shauny

Reputation: 61

selecting a html link with a particular id and a html tag value

I have a HTML code snippet like this:

 <div class="chartPeriodChangeOptions" id="id1">
    <a href="#" class="hourlyChartPeriod" data-period="day">D</a>
    <a href="#" class="hourlyChartPeriod" data-period="week">W</a>
 </div>
 <div class="chartPeriodChangeOptions" id="id2">
    <a href="#" class="hourlyChartPeriod" data-period="day">D</a>
    <a href="#" class="hourlyChartPeriod" data-period="week">W</a>
 </div>

I am trying to add a class="active", to link with id="id1" and data-period="day".

With the following code, I am able to choose the one with particular data value

$("a[data-period='" + someMethod() + "']").addClass("active");

How can I add id selection part to this as well.

Upvotes: 0

Views: 86

Answers (3)

Supun Praneeth
Supun Praneeth

Reputation: 3160

use this:

$(document).ready(function(){

        $("#id1 a[data-period='" + someMethod() + "']").addClass("active");


});

Upvotes: 0

Fueled By Coffee
Fueled By Coffee

Reputation: 2559

If you want this to be extensible use the 'starts with' selector:

$("div[id^='id'] > a[data-period='" + someMethod() + "']").addClass("active");

This will accept id="id1", id="id2", id="id3", ... etc

Upvotes: 0

Kiran
Kiran

Reputation: 20313

Try this:

$("#id1 > a[data-period='" + someMethod() + "']").addClass("active")

Upvotes: 1

Related Questions