JQuery comment sélectionner l'ID suivante avec le sélecteur

Question

Le html:

<div id="videos"> 
    <a href="javascript:loadAndPlayVideo('QXoIMTjk9Xg')"><img src="http://i.ytimg.com/vi/QXoIMTjk9Xg/default.jpg" id="thumb_QXoIMTjk9Xg"></a> 
    <a href="javascript:loadAndPlayVideo('nWubfMkDfVs')"><img src="http://i.ytimg.com/vi/nWubfMkDfVs/default.jpg" id="thumb_nWubfMkDfVs"></a> 
    <a href="javascript:loadAndPlayVideo('S3WDKXq36WI')"><img src="http://i.ytimg.com/vi/S3WDKXq36WI/default.jpg" id="thumb_S3WDKXq36WI"></a> 
    <a href="javascript:loadAndPlayVideo('sGrfLQVVI8A')"><img src="http://i.ytimg.com/vi/sGrfLQVVI8A/default.jpg" id="thumb_sGrfLQVVI8A"></a> 
</div> 

Le problème: Nous avons l'id 'nWubfMkDfVs' et nous avons besoin de connaître la prochaine ID afin d'obtenir fonctionnalité de playlist

Note: il est sans thumb_, le thumb_ est parce que j'utilise l'id nWubfMkDfVs dans un autre div et que vous voulez éviter les doubles numéros d'identification

Question 1: Comment faire un sélecteur qui nous donne S3WDKXq36WI comme réponse lors de l'utilisation de nWubfMkDfVs?

Question 2: Comment faire un sélecteur qui nous donne QXoIMTjk9Xg en réponse à l'utilisation de sGrfLQVVI8A?

J'ai essayé beaucoup de sélecteurs, mais ils ont tous échoué, je suis très curieux de savoir comment vous allez résoudre ce problème!

Answer 1

Essayez ceci (demo):

HTML

<div id="videos"> 
    <a href="javascript:loadAndPlayVideo('QXoIMTjk9Xg')"><img src="http://i.ytimg.com/vi/QXoIMTjk9Xg/default.jpg" id="thumb_QXoIMTjk9Xg"></a> 
    <a href="javascript:loadAndPlayVideo('nWubfMkDfVs')"><img src="http://i.ytimg.com/vi/nWubfMkDfVs/default.jpg" id="thumb_nWubfMkDfVs"></a> 
    <a href="javascript:loadAndPlayVideo('S3WDKXq36WI')"><img src="http://i.ytimg.com/vi/S3WDKXq36WI/default.jpg" id="thumb_S3WDKXq36WI"></a> 
    <a href="javascript:loadAndPlayVideo('sGrfLQVVI8A')"><img src="http://i.ytimg.com/vi/sGrfLQVVI8A/default.jpg" id="thumb_sGrfLQVVI8A"></a> 
</div> 
<br> 
current ID: <span class="current"></span> 
<br> 
<button>Next</button> 

Script

$(document).ready(function() { 
    var currentID = 'QXoIMTjk9Xg'; 
    $('.current').html(currentID); 

    $('button').click(function() { 
     currentID = getNextId(currentID); 
     $('.current').html(currentID); 
    }); 

    getNextId = function(id) { 
     // default to first video if next isn't found 
     var nxt = $('#videos').find('img[id$=' + id + ']').parent().next().find('img').attr('id') || $('#videos img:eq(0)').attr('id'); 
     return nxt.replace(/thumb_/, ''); 
    } 
}) 

Answer 2

Parce que vous faites référence à un ID imbriqué dans un un, vous devez faire:

$("#nWubfMkDfVs").parent().next("a").children('img') 

Remarque, d'abord il sélectionne le parent, le prochain point d'ancrage, l'enfant img.