jQuery TypeError:$（…；）.attr（…；）未定义？

以下错误类型错误：$（…）。此代码行上发生未定义的属性（…）：

$('iframe').each(function(index,item) { 
    if($(item).attr('src').match(/(https?:)?\/\/www\.youtube\.com/)) {

为什么在这种情况下我不能调用

.attr（）

方法

整个功能：

$(document).ready(function() {
  if(typeof YOUTUBE_VIDEO_MARGIN == 'undefined') {
    YOUTUBE_VIDEO_MARGIN=5;
  }
  $('iframe').each(function(index,item) {
    if($(item).attr('src').match(/(https?:)?\/\/www\.youtube\.com/)) {
      var w=$(item).attr('width');
      var h=$(item).attr('height');
      var ar = h/w*100;
      ar=ar.toFixed(2);
      //Style iframe    
      $(item).css('position','absolute');
      $(item).css('top','0');
      $(item).css('left','0');    
      $(item).css('width','100%');
      $(item).css('height','100%');
      $(item).css('max-width',w+'px');
      $(item).css('max-height', h+'px');        
      $(item).wrap('<div style="max-width:'+w+'px;margin:0 auto; padding:'+YOUTUBE_VIDEO_MARGIN+'px;" />');
      $(item).wrap('<div style="position: relative;padding-bottom: '+ar+'%; height: 0; overflow: hidden;" />');
    }
  });
});

使用

prop（）

而不是

attr（）

。页面中可能有其他

iframes

没有

src

属性。因此，使用

attr（）

可以为

$（item.prop（'src'）

获取

未定义的
，如果item没有属性
src
。因此出现了错误

$(item).prop('src');

您的代码

$(document).ready(function() {
  if(typeof YOUTUBE_VIDEO_MARGIN == 'undefined') {
    YOUTUBE_VIDEO_MARGIN=5;
  }
  $('iframe').each(function(index,item) {
    if($(item).prop('src').match(/(https?:)?\/\/www\.youtube\.com/)) {
      var w=$(item).attr('width');
      var h=$(item).attr('height');
      var ar = h/w*100;
      ar=ar.toFixed(2);
      //Style iframe    
      $(item).css('position','absolute');
      $(item).css('top','0');
      $(item).css('left','0');    
      $(item).css('width','100%');
      $(item).css('height','100%');
      $(item).css('max-width',w+'px');
      $(item).css('max-height', h+'px');        
      $(item).wrap('<div style="max-width:'+w+'px;margin:0 auto; padding:'+YOUTUBE_VIDEO_MARGIN+'px;" />');
      $(item).wrap('<div style="position: relative;padding-bottom: '+ar+'%; height: 0; overflow: hidden;" />');
    }
  });
});

$（文档）.ready（函数（）{
如果（YOUTUBE_视频_边距的类型=='undefined'）{
YOUTUBE_VIDEO_MARGIN=5；
}
$（'iframe'）。每个（函数（索引，项）{
if（$（item）.prop（'src'）.match（/（https？：）？\/\/www\.youtube\.com/）{
var w=$（item.attr（'width'）；
var h=$（item.attr（'height'）；
var-ar=h/w*100；
ar=ar.toFixed（2）；
//样式iframe
$（item.css（'position'，'absolute'）；
$（item.css（'top'，'0'）；
$（item.css（'left'，'0'）；
$（item.css（'width'，'100%）；
$（item.css（'height'，'100%）；
$（item.css（'max-width'，w+'px'）；
$（item.css（'max-height'，h+'px'）；
$（项目）。换行（“”）；
$（项目）。换行（“”）；
}
});
});
它正在调用
。将
与产生错误的未定义LHS匹配，而不是
。attr（）
本身。一个次要问题：不要重复。所有这些jQuery调用都可以链接到一个
$（项）
（或
$（此）
，如果您遵循给定的答案）。有些还可以组合成一个方法-例如
。css（）
可以一次更改多个css属性。@Alnitak在这种情况下LHS表达式是什么？@IanButler显然，它是
未定义的
。
src
属性不存在，或者不可访问（出于安全原因？）。我自己从未尝试过使用iFrame，所以我不确定是哪个。无法复制：甚至只是
item.src
。FWIW和IMHO，这是一个糟糕的解释。真正的问题是iframe元素上可能不存在属性
src
，因此从
.attr
返回一个“null”值。但是，支持该属性的属性始终有一个值，即使它只是一个空字符串。它与页面上的“其他”iFrame无关。@Alnitak您对
item.src
的看法是正确的，但请参阅。因此，如果有一个
iframe
没有定义
src
属性，那么这里是
$（item）.attr（'src'）.match（/（https？：）？\/\/www\.youtube\.com/）
我们正在用
未定义的
进行
匹配。然而，我也在说，当您只需编写最有效（且更易于阅读）的
元素.src
时，使用
$（element）.prop（'src'）
是没有意义的。
$(document).ready(function() {
  if(typeof YOUTUBE_VIDEO_MARGIN == 'undefined') {
    YOUTUBE_VIDEO_MARGIN=5;
  }
  $('iframe').each(function(index,item) {
    if($(item).prop('src').match(/(https?:)?\/\/www\.youtube\.com/)) {
      var w=$(item).attr('width');
      var h=$(item).attr('height');
      var ar = h/w*100;
      ar=ar.toFixed(2);
      //Style iframe    
      $(item).css('position','absolute');
      $(item).css('top','0');
      $(item).css('left','0');    
      $(item).css('width','100%');
      $(item).css('height','100%');
      $(item).css('max-width',w+'px');
      $(item).css('max-height', h+'px');        
      $(item).wrap('<div style="max-width:'+w+'px;margin:0 auto; padding:'+YOUTUBE_VIDEO_MARGIN+'px;" />');
      $(item).wrap('<div style="position: relative;padding-bottom: '+ar+'%; height: 0; overflow: hidden;" />');
    }
  });
});