jQuery getting attribute then adding class when clicking div

Question

I am trying to add functionality to an already built javascript slider. I am trying to add in images of the videos that people can click to bring them to the proper video in the slide. I am trying to accomplish this with jQuery. I would like to know how to get the attribute of the divs inside of div.navBulletsWrapper. My code at the moment seems to change all the divs to rel="0" instead of getting the rel value and setting the class accordingly. Thanks for any help.

HTML:

<div class="video-thumbnail">
    <a id="video-thumbnail1">
       <img src="/_images/VideoImages/btn_FreeConsultation.png" />
    </a>
</div>

This is being created dynamically by the slider javascript:

<div class="navBulletsWrapper">
    <div class="active" rel="0"> … </div>
    <div rel="1"> … </div>
    <div rel="2"> … </div>
    <div rel="3"> … </div>
</div>

jQuery:

$(document).ready(function(){

    $('#video-thumbnail1').click(function(){
        $('div.navBulletsWrapper div').attr("rel", "0").addClass("active");
    });

});

live website in case you want to see full code: http://www.hazeltonlawgroup.com

Not sure to fully understand your question, but tell me if i am wrong, you want to select the div with the attribute rel=0 and add the class to it? — Karl-André Gagnon
– Karl-André Gagnon, Commented Sep 5, 2013 at 20:45

Holt · Accepted Answer · 2013-09-05 20:46:42Z

1

If you want to find a div according to its attribute, you have to do it with selector:

$('div.navBulletsWrapper div[rel="0"]').addClass('active') ;

If you want to remove class from the others div:

$('div.navBulletsWrapper div:not([rel="0"])').removeClass('active')

answered Sep 5, 2013 at 20:46

Holt

38.1k7 gold badges100 silver badges147 bronze badges

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

1 Comment

Phorden Over a year ago

This was actually a very good answer as it is not what I asked, but I still did need to remove instances of the class from other divs. Thank you.

Sushanth -- · Accepted Answer · 2013-09-05 20:45:48Z

1

$('div.navBulletsWrapper div').attr("rel", "0")

This sets all the child div's with attribute rel="0" .

If you looking to target that div.. then you selector should somewhat look in these lines.

$('div.navBulletsWrapper').find("[rel='0']").addClass("active");

answered Sep 5, 2013 at 20:45

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

1 Comment

Terry Over a year ago

there should be a . before the find function

JFK · Accepted Answer · 2013-09-05 20:49:43Z

1

With the attar method you can set and get an attribute.

el.attr('attribute',value')

set the attribute.

el.attr('attribute')

get the attribute value.

Just change your code to

$(document).ready(function(){

    $('#video-thumbnail1').click(function(){
        $('div.navBulletsWrapper div[rel='+index+']').addClass("active");
    });

});

Where index is the element which you want to add the 'active' class

edited Sep 5, 2013 at 20:49

JFK

41.2k31 gold badges138 silver badges314 bronze badges

answered Sep 5, 2013 at 20:47

diegocstn

4,7273 gold badges23 silver badges17 bronze badges

Comments

JFK · Accepted Answer · 2013-09-05 20:52:34Z

0

Another way

$('div.navBulletsWrapper div').filter("[rel=0]").addClass("active");

or

$('div.navBulletsWrapper').find("div[rel=0]").addClass("active");

answered Sep 5, 2013 at 20:52

JFK

41.2k31 gold badges138 silver badges314 bronze badges

Collectives™ on Stack Overflow

jQuery getting attribute then adding class when clicking div

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related