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