Target custom attributes using jQuery

Question

I am using a slider (Slick Slider) and I am trying to target individual slides.

Here is an example of the things it spits into the divs.

<div class="slick-slide" data-slick-index="1" aria-hidden="true" tabindex="-1" role="option" aria-describedby="slick-slide01"></div>
<div class="slick-slide" data-slick-index="2" aria-hidden="true" tabindex="-1" role="option" aria-describedby="slick-slide02"></div>

I want to target each div using jQuery so I can add a class to it. I think the attribute I want to target is aria-describedby

I've tried doing this:

jQuery("[aria-describedby='slick-slide01']").addClass("newClass"); but it doesn't seem to work.

I can't use nth child selectors because I have Slick set to infinite loop and nth child on this doesn't always select the right div. What can I try next?

ah sorry, i think i figured it out. my addclass jquery was loading before the slick was initialized so it had nothing to attach to. thanks for confirming — cup_of
– cup_of, Commented Nov 16, 2017 at 19:25
There's a potential race like condition you may be hitting. I'm not familiar with slick slider, but, if you're executing your code (that should work by the looks of it) before slick slider has had time to create/update the DOM with the info you're using it may appear your code is wrong but maybe just executed too soon. — subhaze
– subhaze, Commented Nov 16, 2017 at 19:26

user6748331 · Accepted Answer · 2017-11-16 19:22:30Z

1

As you can see, there is no problem with your code. You just have both divs empty, so it just looks like there is no change...

jQuery("[aria-describedby='slick-slide01']").addClass("newClass");

.newClass {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slick-slide" data-slick-index="1" aria-hidden="true" tabindex="-1" role="option" aria-describedby="slick-slide01">AAA</div>
<div class="slick-slide" data-slick-index="2" aria-hidden="true" tabindex="-1" role="option" aria-describedby="slick-slide02">AAA</div>

answered Nov 16, 2017 at 19:22

user6748331

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

4 Comments

cup_of Over a year ago

cool thanks, my addclass jquery was loading before the slick was initialized so it had nothing to attach to

Carsten Løvbo Andersen Over a year ago

If there is no problem with the code, you should not make an answer about it, simple just make a comment and close it as problem can no longer be reproduced

Carsten Løvbo Andersen Over a year ago

@cup_of I'm not sure why you voted to close it, since you can just remove the question, since there was no real problem according to your code.

cup_of Over a year ago

@CarstenLøvboAndersen I cant delete it because someone gave an answer

Collectives™ on Stack Overflow

Target custom attributes using jQuery

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related