Question

我想将页面上的所有YouTube嵌入包装成div。目前，我可以使用以下内容将所有 iframe包装在：

中

   jQuery(document).ready(function(){

    jQuery('iframe').wrap("<div class='ta-vid-cont'></div>");

   });

但我想只定位YouTube嵌入的iframe。我怎么能这样做？

典型的YouTube嵌入式内容如下：

<iframe width="700" height="394" frameborder="0" allowfullscreen="" src="https://www.youtube.com/embed/d3LDQMKLc?feature=oembed&wmode=transparent">

Answer 1

可以使用Attrubute Contains选择器

$('iframe[src*="youtube"]').wrap("<div class='ta-vid-cont'></div>");

参考Attribute Contains Selector docs

Answer 2

您可以通过源网址使用filter（）和正则表达式过滤：

jQuery('iframe').filter(function(){
    return this.src.match(/youtube\.com/i);
}).wrap("<div class='ta-vid-cont'></div>");

小提琴：http://jsfiddle.net/0hhk9kc5/1/

（因为出于安全原因，jsfiddle不会显示iframe，我将过滤更改为另一个属性......但想法是一样的;）

[编辑]：覆盖youtu.be：

jQuery('iframe').filter(function(){
    return this.src.match(/(youtube\.com|youtu\.be)/i);
}).wrap("<div class='ta-vid-cont'></div>");

使用的正则表达式的解释：https://regex101.com/r/dU0bF2/1

Answer 3

我认为您可以在＃34; www.youtube.com＆＃34;

中搜索iframe的src属性

var str=$('iframe').attr('src');  
if(str.search('www.youtube.com') > 0){  
......
....  
};

此致

Answer 4

您可以轻松地为每个iframe指定一个ID并使用jQuery <iframe id="youtube" width="700" height="394" frameborder="0" allowfullscreen="" src="https://www.youtube.com/embed/d3LDQMKLc?feature=oembed&wmode=transparent">

抓取它

$(document).ready(function(){

    $('#youtube').wrap("<div class='ta-vid-cont'></div>");
});

如果是YouTube嵌入，请定位iframe

4 个答案: