JQuery如何使用选择器选择下一个ID答案

【问题标题】：JQuery how to select next id with selectorJQuery如何使用选择器选择下一个ID
【发布时间】：2011-04-13 15:53:36
【问题描述】：

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>

问题： 我们有 ID 'nWubfMkDfVs'，我们需要知道下一个 ID 才能获得播放列表功能。

注意：没有thumb_，thumb_是因为我在另一个div中使用了id nWubfMkDfVs，想避免双重Id的

问题 1：如何在使用 nWubfMkDfVs 时制作一个选择器，让我们响应 S3WDKXq36WI？

问题 2：如何在使用 sGrfLQVVI8A 时制作一个选择器，让我们得到 QXoIMTjk9Xg 作为响应？

我尝试了很多选择器，但都失败了，我很好奇你将如何解决这个问题！

【问题讨论】：

你应该避免使用“|”作为前缀，因为 $('#|nWubfMkDfVs');例如会抛出异常
谢谢您的提示，我会将它们更改为 thumb_ (thumb_nWubfMkDfVs)。问题保持不变:)

标签： jquery html jquery-selectors css-selectors

【解决方案1】：

因为您引用的是嵌套在 a 中的 ID，所以您必须这样做：

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

注意，它首先选择父节点，然后是下一个锚点，然后是 img 子节点。

【讨论】：

太棒了！这是一个清晰而好的答案，谢谢！问题1解决了。问题 2 仍处于打开状态（具有列表中的最后一个 id 并获取列表中的第一个 id 作为响应）

【解决方案2】：

试试这个 (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>

脚本

$(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_/, '');
    }
})

【讨论】：