Target dynamic classes with jquery

Question

I have a template that allows for multiple royalslider videos on a page (I don't embed the videos straight into the template because the client wants to use their own hi-res images as placeholders). I have a play button set up for each but when one is clicked, all play. How do I alter my jquery code to target each if i dynamically alter the class with php using an idx value (i.e. .myclass-0, .myclass-1, .myclass-2, etc.)?

<li class="gallery-item large-12 columns collapse royalSlider rsDefault vidImg">
<div class="vidLaunch">
    <div class="defer-image image-ratio:16x9">
        <div class="rsImg" src="[[+file_url:phpthumbof=`w=970&h=546&q=80&zc=1`]]" data-rsVideo="[[+url]]" alt="[[+name]]"></div>
    </div>
</div>

 $('.vidLaunch').click(function() {
    $('.royalSlider').royalSlider('playVideo');
});

Can you post some html? what type of element are .myclass-0, .myclass-1 etc? — Guruprasad J Rao
– Guruprasad J Rao, Commented Oct 4, 2015 at 6:57
Does your dynamically generated buttons have these dynamic numbers like 0,1,2 somewhere in it? For example "data-refId=X" where X is one of the above number. — vijayP
– vijayP, Commented Oct 4, 2015 at 7:08

Ionică Bizău · Accepted Answer · 2015-10-04 07:08:13Z

1

You can use a regular expression for matching all elements having classes starting with myclass- (you will use the attribute selector):

$('[class^="myclass-"]').royalSlider("playVideo");

On the other side, you can append another class to these elements and select them like this:

$(".awesome-video").royalSlider("playVideo");

answered Oct 4, 2015 at 7:08

Ionică Bizău

114k95 gold badges311 silver badges490 bronze badges

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

2 Comments

pjldesign Over a year ago

right. using php i can dynamically update the .royalslider class to .royalslider-1, .royalslider-2, .royalslider-3, per instance of the video, also .vidLaunch-1, .vidLaunch-2, .vidLaunch-3. I'm just looking for a way to tell jquery to find these dynamic pairings per each instance (does that make any sense?).

Ionică Bizău Over a year ago

@pjldesign Exactly. This is what I answered: you can get the elements having classes that start with royalslider-: $('[class^="royalslider-"]').

Collectives™ on Stack Overflow

Target dynamic classes with jquery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related