如何为基于 youtube.com/embed URL andress 的链接添加类？答案

【问题标题】：How can I add class for the link based on youtube.com/embed URL andress?如何为基于 youtube.com/embed URL andress 的链接添加类？
【发布时间】：2015-10-16 04:32:27
【问题描述】：

我有一个灯箱插件，它使用 lightview 类作为链接。所以用法是这样的：

<a href="https://youtube.com/embed/HPOcZtfjrrU?start=102&autoplay=1" class="lightview">Link for the site</a>

我想为每个开始这个 url 的链接添加这个类（lightview）：

https://youtube.com/embed/

这是重要的部分：
我不想为这样的链接添加类：
https://www.youtube.com/watch?v=XtSf8GqrF6Q
因为这个网址会嵌入到我的网站上。

【问题讨论】：

例如，您有 5 个带有 href="youtube.com/embed" 的元素，并且您想给这个元素一个名为 lightview 的类，但那些没有 href="@987654324 的元素@" 你不想给一个名为 lightview 的类，这就是你要问的
是的，很抱歉耽搁了:)

标签： javascript jquery regex youtube

【解决方案1】：

jQuery 可以用来达到想要的效果，也可以用纯 CSS3 来完成，如下所示：

a[href^='https://youtube.com/embed'] {
color:blue;
}

而且因为它不使用任何形式的 JavaScript，所以无论用户是否启用了 JavaScript，它都能正常工作

【讨论】：

【解决方案2】：

如果 href 以 https://youtube.com/embed/ 开头，则可以使用 Jquery 检索 a 标签和每个标签：

$(function(){
  $("a").each(function(ix, el){
    if(el.href.match("^https://youtube.com/embed/")) {
      $(el).addClass('lightbox');
    }
  })
});

这里是plunk。

【讨论】：

【解决方案3】：

使用 jQuery，您可以使用 [attribute^=value] 选择器选择所有具有以给定值开头的属性的元素。然后，您只需将 lightview 类添加到这些元素。很简单：

$("a[href^='https://youtube.com/embed']").addClass("lightview");

这是一个演示：

$("a[href^='https://youtube.com/embed']").addClass("blue");

a {
    display:block;
    color:red;
}

a.blue {
    color:blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<a href="https://youtube.com/embed/HPOcZtfjrrU?start=102&autoplay=1">Video with right link</a>
<a href="https://www.youtube.com/watch?v=XtSf8GqrF6Q">Video without right link</a>
<a href="http://www.google.com">Link to Google</a>
<a href="https://youtube.com/embed/HPOcZtfjrrU?start=102&autoplay=1">Antoher video with right link</a>
<a href="http://stackoverflow.com">Another wrong link</a>

【讨论】：

非常优雅的语法选择，我不得不承认...为你 +1。
谢谢它的工作，只需要处理这个代码：Put on document.ready，因为 myscript 放置在正文中。