Почему мой селектор jquery игнорируется?

Question

В нижеприведенном фрагменте jquery я хочу заменить некоторый html в каждом элементе, который соответствует селектору a.thumbs (он получает миниатюру с youtube).

Проблема в том, что она не работает так, как я ожидал. Если у всех a элементов на странице есть класс «thumbs», он отлично работает (каждому элементу a дается мой html). Но если есть один или несколько элементов a, у которых есть другой класс, этот элемент получает html, а не элемент a с большими пальцами класса.

Я не могу понять, почему. Пожалуйста помоги :-). Я, должно быть, неправильно понял, как работает .each().

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

Отредактировано: Большое спасибо за предложения. Никто из них не работал, но после ваших замечаний я начинаю понимать лучше. Итак, вот пример html. Цель состоит в том, чтобы извлечь и показать миниатюру youtube в html, которая содержит только простую ссылку на видео YouTube. Так что этот HTML:

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

должен превратиться в это:

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

Мой код работает, если есть только одна ссылка, или если все ссылки имеют одинаковый класс пальцы.

Извините за этот длительный вопрос :-), но я, наконец, получил работу благодаря вашим предложениям. Это окончательный рабочий код:

jQuery(function($) { 

    $(document).ready(function(){ 
    // Youtube 

     $('a.thumbs[href^="http://www.youtube.com"], a.thumbs[href^="http://youtu.be"],a.thumbs[href^="http://youtube.com"]').each(function (index, value){ 
      console.log(value); 
      var video_id = this.href.split('v=')[1]; 
      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/mycompany/images/video-overlay.png\"></div></div>'); 
     }); 
    }); 
}); 

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