jquery - selecting class with specific data-attribute value

Question

Having a bit of a dumb moment right now and can't figure out why this is not working. It's been awhile since doing anything with jquery.

var owl = $('.owl-main');
var button = $('.owl-button');

owl.owlCarousel({
    dots:false,
    margin:15,
    nav:true,
    navText: [
        '<span class="o-page">Prev</span>',
        '<span class="o-page">Next</span>'
    ],
    responsive:{
        0:{
            items:1
        }
    },
    onChanged: callback
})

function callback(event) {
    console.log(event.item.index);
    console.log(button);

    button.removeClass('active');
    //$(".owl-button[data-id='"+event.item.index+"']").addClass('active');
    button.find("[data-id='" + event.item.index + "']").addClass('active');
}

My issue is button.find("[data-id='" + event.item.index + "']").addClass('active'); does not add the 'active' class yet the commented out code above it, $(".owl-button[data-id='"+event.item.index+"']").addClass('active'); works perfectly fine.

button and event.item.index are reporting correctly so why is that particular line doing nothing for me?

Can you show your Html too?

Rajshekar Reddy
– Rajshekar Reddy

2016-10-30 07:00:24 +00:00
Commented Oct 30, 2016 at 7:00 — Rajshekar Reddy
– Rajshekar Reddy, Commented Oct 30, 2016 at 7:00

Rajshekar Reddy · Accepted Answer · 2016-10-30 07:10:28Z

1

The issue is find() .. You are using it the wrong way.. it will actually search for the child element within the button with the given attribute. But what you want is to find a button with the given attribute.

The commented code is the way you have to do it.

Edit: If you want to use the stored array of button itself to get this working then you can use filter() in place of find

Here is a reference http://api.jquery.com/filter/

button.filter("[data-id='" + event.item.index + "']").addClass('active');

edited Oct 30, 2016 at 7:10

answered Oct 30, 2016 at 7:03

Rajshekar Reddy

19.1k4 gold badges45 silver badges64 bronze badges

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

3 Comments

user756659 Over a year ago

So there is no way to use my stored var button = $('.owl-button'); in that commented line that works?

user756659 Over a year ago

Perfect - that is what I was looking for. Thanks for clearing that up!

Rajshekar Reddy Over a year ago

Glad I could help.

Collectives™ on Stack Overflow

jquery - selecting class with specific data-attribute value

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related