Difficulté à Duplication a montré un comportement avec différentes balises

Question

Je suis en train de reproduire le comportement suivant du joueur: http://kolber.github.io/audiojs/demos/test6.html j'ai pu tout faire en plus ce bit (Vous pouvez vérifier la source de la page pour le code complet)

// Setup the player to autoplay the next track 
     var a = audiojs.createAll({ 
      trackEnded: function() { 
      var next = $('ol li.playing').next(); 
      if (!next.length) next = $('ol li').first(); 
      next.addClass('playing').siblings().removeClass('playing'); 
      audio.load($('a', next).attr('data-src')); 
      audio.play(); 
      } 
     }); 

Une démo la page a la structure suivante:

<ol> 
    <li class="playing"> 
    <a href="#" data-src="http://s3.amazonaws.com/audiojs/01-dead-wrong-intro.mp3">dead wrong intro</a> 
    </li> 

    <li class="playing"> 
    <a href="#" data-src="http://s3.amazonaws.com/audiojs/01-dead-wrong-intro.mp3">dead wrong intro</a> 
    </li> 

    <li class="playing"> 
    <a href="#" data-src="http://s3.amazonaws.com/audiojs/01-dead-wrong-intro.mp3">dead wrong intro</a> 
    </li> 

    <!-- Etc --> 
</ol> 

Cependant ma page a la structure suivante:

<div class="main"> 
    <article class="article> 

    <!-- .. --> 
    <div class="article-footer> 
     <ul> 
     <li> 
      <a class="article-play" href="#" data-src="http://somesongurl.com/file.mp3"></a> 
     </li> 
     </ul> 
    </div> 

    </article> 
</div> 

Donc à l'intérieur de chaque article il y a une balise d'ancrage avec classe-play, agissant comme balises d'ancrage dans la page de démonstration <ol> Donc je veux jouer automatiquement chaque balise d'ancrage, le problème est qu'ils ne sont pas à l'intérieur <ol> des articles. J'ai essayé ceci:

  // Setup the player to autoplay the next track 
      var a = audiojs.createAll({ 
      trackEnded: function() { 
       var next = $('.main a.playing').next(); 
       if (!next.length) next = $('.main a.article-play').first(); 
       next.addClass('playing').siblings().removeClass('playing'); 
       audio.load($('.article-play', next).attr('data-src')); 
       audio.play(); 
      } 
     }); 

Mais cela ne fonctionne pas, une fois que la chanson se termine le jeu et est censé passer au suivant src l'intérieur balise audio devient src="undefined" Je suis nouveau à jQuery et peut-être ne comprennent pas comment mettre en œuvre une structure correcte, donc je demande l'aide de la communauté.

EDIT Il existe d'autres éléments de liste avec des balises d'ancrage à l'intérieur de chaque div .article-footer. Par conséquent src pour le joueur doit être recherché spécifiquement de l'ancre avec la classe de .article-play

Answer 1

next() obtient le prochain frère d'un élément. Dans votre code, vous essayez d'obtenir le frère suivant de la balise d'ancrage, mais dans un élément de liste, il n'y a qu'un seul élément d'ancrage. Vous pouvez corriger ce problème en ajoutant la classe 'playing' aux éléments de la liste au lieu des balises anchor, et votre lecteur devrait alors fonctionner comme prévu.

Au lieu de cela:

var next = $('.main a.playing').next(); 

Utilisez ceci:

var next = $('.main li.playing').next(); 

Alors que les éléments de la liste auront la classe 'jouer', et vous serez en mesure d'accéder l'élément de liste suivant.

jQuery Documentation: http://api.jquery.com/next/