i want to show hide element by using dynamically generated class

Question

I want to show / hide the parent element with respect to the class in its childs has. Here is what i want.

    <p><a href="<?php echo site_url('mp3/coins.mp3');?>" title="hello" class="sm2_button" id="song1">play</a> Dear Yesterdays </p>
    <p><a href="<?php echo site_url('mp3/fancy-beer-bottle-pop.mp3');?>" title="hello" class="sm2_button" id="song2">play</a> song 2</p>
    <p><a href="<?php echo site_url('mp3/coins.mp3');?>" title="hello" class="sm2_button" id="song1">play</a> Dear Yesterdays </p>
    <p><a href="<?php echo site_url('mp3/fancy-beer-bottle-pop.mp3');?>" title="hello" class="sm2_button" id="song2">play</a> song 2</p>

       <script>
    $(document).ready(function(){
    $('.play p').hide();
        $('.play p:first').show();
    $('.play p a').each(function(){
    var attr = $(this).attr('class');
    var cls = attr.split(' ');  
    if(cls[1]=='sm2_playing' || cls[1]=='sm2_paused')
    {
        // display none to all .play p tags except the one with those classes sm2_playing or sm2_paused
        }
    });



    });
    </script>

please help me. I am using soundmanager2. And i want to play songs one after another while only displaying the playing ones.

Answer 1

jQuery will not do what you are trying to do for future objects.

Rather than using show()/hide(), you can just simply use addClass() and removeClass() in conjunction with your CSS:

CSS

.play p
{
    display: none;
}

.play p.sm2_playing, .play p.sm2_paused
{
    display: block;
}

So then when you do $(this).addClass('sm2_playing') the element will show, and $(this).removeClass('sm2_playing sm2_paused') the element will hide.