How do I add a class to an element's parent using jQuery? -
i have music page set , when play button clicked song, class changes buttons_mp3j buttons_mp3jpause. when class buttons_mp3jpause, want target parent li.song , add class it.
<li class="song"> <div> <span> <span class="buttons_mp3jpause"> </span> </span> </div> </li> i have tried following code didn't work.
$(".buttons_mp3jpause").parents("li.song").addclass("playing"); where did go wrong?
edit
$('.haiku-play').bind('click', function() { $('.haiku-player').jplayer("pause"); }) edit 2
<article> <ul> <li class="song">yadayada</li> <li class="song">yadayada</li> <li class="song">yadayada</li> <li class="song">yadayada</li> </ul> </article> <article> <ul> <li class="song">yadayada</li> <li class="song">yadayada</li> <li class="song">yadayada</li> <li class="song">yadayada</li> </ul> </article> <article> <ul> <li class="song">yadayada</li> <li class="song">yadayada</li> <li class="song">yadayada</li> <li class="song">yadayada</li> </ul> </article>
as mentioned in question, you're assigning class buttons_mp3jpause dynamically, need attach handler element exists in dom on page load, , delegate dynamic class, using jquery's .on():
$('.song').on('click', '.buttons_mp3jpause', function() { $(this).closest('li.song').addclass('playing'); }); in response first comment:
simply remove playing class other song elements (the below presumes of song elements siblings!):
.addclass('playing').siblings('li.song').removeclass('playing');
in response last comment:
the easiest thing in situation remove playing class song elements, , add relevant one:
$('li.song').removeclass('playing'); $(this).closest('li.song').addclass('playing'); complete example:
$('.song').on('click', '.buttons_mp3jpause', function() { $('li.song').removeclass('playing'); $(this).closest('li.song').addclass('playing'); });
Comments
Post a Comment