JQuery, как выбрать следующий идентификатор с помощью селектора - PullRequest
Новая
       19

JQuery, как выбрать следующий идентификатор с помощью селектора

1 голос
/ 17 сентября 2010

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>

Проблема: У нас есть идентификатор ' nWubfMkDfVs ', и нам нужно знать следующий идентификатор, чтобы получить функциональность списка воспроизведения.

Примечание: это без большого пальца, большой палец - потому, что я использую идентификатор nWubfMkDfVs в другом div и хочу избежать двойного идентификатора

Вопрос 1 : Как сделать селектор, который дает нам S3WDKXq36WI в качестве ответа при использовании nWubfMkDfVs?

Вопрос 2 : Как создать селектор, который дает нам QXoIMTjk9Xg в качестве ответа при использовании sGrfLQVVI8A?

Я пробовал много селекторов, но все они потерпели неудачу, мне очень любопытно, как вы решите эту проблему!

Ответы [ 2 ]

1 голос
/ 17 сентября 2010

Попробуйте это ( демо ):

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>

Скрипт 

$(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_/, '');
    }
})
1 голос
/ 17 сентября 2010

Поскольку вы ссылаетесь на идентификатор, вложенный в a, вам придется сделать следующее: 

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

Обратите внимание, сначала выбирается родитель, затем следующий якорь, затем потомок img.

...