Question

在下面的jquery片段中，我想替换适合选择器THREAD_PRIORITY_FOREGROUND的每个元素中的一些html（它从youtube获取缩略图）。

问题在于它没有像我预期的那样工作。如果页面上的所有a.thumbs元素都有类＆＃34; thumb＆＃34;它工作正常（每个a元素都给我的html）。但是，如果有一个或多个a元素具有另一个类，则该元素将获取html，而不是具有类拇指的a元素。

我无法弄清楚原因。请帮忙：-）。我一定误解了.each（）是如何运作的。

编辑：非常感谢您的建议。虽然他们都没有工作，但是在你发言之后我开始明白了。所以这是html的一个例子。目标是在html中获取并显示youtube缩略图，其中仅包含指向youtube视频的简单链接。所以这个html：

jQuery(function($) {

    $(document).ready(function(){
    // Youtube
        var $youtube;
        var video_id;
        $("a.thumbs").each(function (index, value){
            $youtube = $('a[href^="http://www.youtube.com"], a[href^="http://youtu.be"], a[href^="http://youtube.com"]');
            video_id = $youtube[index].href.split('v=')[1];
            console.log(video_id);
            $youtube[index].innerHTML = '<div class=\"youtube_container\"><div class=\"youtube_thumb image\"><img src=\"http://img.youtube.com/vi/'.concat(video_id).concat('/1.jpg\"></div><div class=\"youtube_overlay image\"><img src=\"/sites/all/themes/mycompany/images/video-overlay.png\"></div></div>');
        });
    });
});

应该变成这个：

<p><a class="thumbs" href="http://www.youtube.com/watch?v=Vvxxxx123">random text</a></p>

如果只有一个链接或所有链接都具有相同的Thumb类，则我的代码可以正常工作。

对于这个冗长的问题抱歉:-)，但是由于你的建议，我终于开始工作了。这是最终的工作代码：

<a class="thumbs" href="http://www.youtube.com/watch?v=Vvxxxx123">
<div class="youtube_container">
<div class="youtube_thumb image">
<img src="http://img.youtube.com/vi/Vvxxxx123/1.jpg">
</div>
<div class="youtube_overlay image">
<img src="/sites/all/themes/mycompany/images/video-overlay.png">
</div>
</div>
</a>

Answer 1

您没有更新拇指选择器中的元素。你可以试试这个：

$('a[href^="http://www.youtube.com"], a[href^="http://youtu.be"],a[href^="http://youtube.com"]').each(function (index, value){
    video_id = this.href;
    console.log(video_id);
    this.innerHTML = '<div class=\"youtube_container\"><div class=\"youtube_thumb image\"><img src=\"http://img.youtube.com/vi/'.concat(video_id).concat('/1.jpg\"></div><div class=\"youtube_overlay image\"><img src=\"/sites/all/themes/nordtec/images/video-overlay.png\"></div></div>');
});

Answer 2

试一试。希望它能解决。如果它没有评论您的要求，则下面的代码片段不满足您的要求。

   jQuery(function ($) {
            $(document).ready(function () {
                var video_id;
                var valid_links = "http://www.youtube.com|http://youtu.be\http://youtube.com";
                $("a.thumbs").each(function (index, value) {
                    var re = new RegExp(valid_links, 'g');
                    if ($(value).attr('href').match(re))
                    {
                        video_id = $(value).attr('href').split('v=')[1];
                        console.log(video_id);
                        $(value).html('<div class=\"youtube_container\"><div class=\"youtube_thumb image\"><img src=\"http://img.youtube.com/vi/'.concat(video_id).concat('/1.jpg\"></div><div class=\"youtube_overlay image\"><img src=\"/sites/all/themes/nordtec/images/video-overlay.png\"></div></div>'));
                    }
                });
            });
        });

为什么我的jquery选择器被忽略了？

2 个答案: