JQuery如何使用选择器选择下一个id

发布于 2024-09-24 00:47:02 字数 1081 浏览 2 评论 0原文

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作为响应？

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

原文

The 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>

The problem:
We have the id 'nWubfMkDfVs' and we need to know the next ID in order to get playlist functionality.

Note: it's without the thumb_, the thumb_ is because I use the id nWubfMkDfVs in another div and want to avoid double Id's

Question 1: How to make a selector that gives us S3WDKXq36WI as response when using nWubfMkDfVs?

Question 2: How to make a selector that gives us QXoIMTjk9Xg as response when using sGrfLQVVI8A?

I tried a lot of selectors but they all failed, I'm very curious in how you will solve this problem!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

悲念泪 2024-10-01 00:47:02

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

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

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

Because you are referencing an ID nested inside an a, you would have to do this:

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

Note, first it selects the parent, then the next anchor, then the img child.

回复收藏 0 原文

染年凉城似染瑾 2024-10-01 00:47:02

试试这个（演示）：

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

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

回复收藏 0 原文

~没有更多了~