Search code examples
jqueryjplayerremoveclass

jQuery - removeClass 'current' when loading JPlayer


What am I missing here? I'm trying to remove the class "jp-playlist-current" from the href upon loading the page. I don't want ANY 'current' style when this page loads. I only want the 'current' displayed when a user clicks on the link.

Unfortunately, since the code for this is dynamically populated, I can't give a static view of the class. Instead, take a look at the screenshot image below posted at this link:

http://dixiedevils.com/code.jpg

and here is the full code for the page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Untitled</title>

<script type="text/javascript">
$(document).ready(function(){
    $('div.jp-type-playlist div.jp-playlist li.jp-playlist-current a').removeClass('jp-playlist-current');
    //$('div.jp-type-playlist div.jp-playlist li').removeClass('jp-playlist-current');
});
</script>

</head>
<body>

<div id="jquery_jplayer_1" class="jp-jplayer"></div>

<div id="jp_container_1" class="jp-audio">

    <div class="jp-type-playlist">

        <div class="jp-playlist">
            <ul>
                <!-- below here is where the dynamic JQ content is placed: -->
                <li></li>
            </ul>
        </div>

    </div>
</div>

</body>
</html>

Solution

  • $("#jp_container_1 .jp-type-playlist .jp-playlist li").find('a').each(function(){
           $(this).removeClass('jp-playlist-current');
    });