jQuery each（）不工作？

我正在运行一个jQuery函数，它应该根据宽度来修改视频的宽度。jQuery each（）不工作？

我有一堆视频在我的页面，我想调整他们的视频容器莫名其妙，它有一个固定的宽度。因此，在我检查视频宽度是否高于容器之前所讨论的功能中，视频宽度应该改为100％，而不是auto，这是所有视频最初的属性。

下面是函数

$(document).ready(function() { 
    $('video').each(function() { 
     if ($(this).css('width')>$('.player-container')[0].css('width')) 
     { 
      $(this).css('width', '100%'); 
     } 
    }); 
});

每个视频如何放置：

<div class="player-container"> 
    <video class="player-video" width="auto" height="auto"> 
     <source src="video/mana-labios-compartidos.mp4"> 
     <source src="video/mana-labios-compartidos.webm"> 
    </video> 
    // more stuff about the video... 
</div>

的事情是，我把警报的每个.each()内，我只看到一个，它会弹出只是该页面的第一个视频实际上。

来源

2014-01-15 dabadaba

如果你console.log（$（'视频'）。长度）你会得到什么？ – justtal

有没有JavaScript差错？不要只使用'alert'，而是放置一个实际的调试断点并观察运行时间值/行为。 – David

'$（'。player-container'）[0] .css（'width'）'是错误的，因为'[0]'返回一个DOM节点。你不能调用'css'。 – Jon

使用jQuery对象作为数组，并指定索引实际上会返回DOM元素，因此不支持jQuery函数。如果您想要匹配集合中的第一个元素，请使用.eq(0)。

此外，尝试使用width()功能，而不是（因为它返回一个整数，而不是由.css('width')返回的字符串。这是comparrisons如你正在运行的尤其方便。

你的最终代码会：

if ($(this).width() > $('.reproductor-container').width())

来源

2014-01-15 19:21:57 BenM

展开：'.css（'width'）'返回一个字符串，而'.width（）'返回一个数字。如果你想比较宽度，你需要数字。你也可以''parseInt（）''.css（'width'）'的返回值来比较。 –

@PatrickGunderson谢谢，当您评论时，我正在扩展答案。 – BenM

在每个'each（）'迭代中，警报都会报告$（this）.width（）为0，除了有时会重新加载页面时的第一个视频，其余的甚至不会重新加载。 – dabadaba

我猜你的选择是错误的

，而不是使用

$('.player-container')[0].css('width')

尝试使用

$('.player-container').eq(0).css('width')

为beeing安全是的CSS（ '宽'）返回一个数量，而不是像 “200像素” 的字符串

if (parseInt($(this).css('width')) > parseInt($('.player-container').eq(0).css('width'))){

来源

2014-01-15 19:24:02

$('.player-container')[0]

获取元素，所以

$('.player-container')[0].css('width')

将给出TypeError。尝试

$('.player-container').css('width')

改为。

来源

2014-01-15 19:25:04 acbabis

.css()是应该在jQuery对象上使用的方法，但是您在jQuery对象内的DOM元素上使用它。此外，它返回一个字符串，在你的情况下将是无用的，所以你需要使用.width()，它会返回一个整数。如果您需要按索引定位元素，请使用.eq()。

这是怎么完成的代码应该是这样的：

$(document).ready(function() { 
    $('video').each(function() { 
     if ($(this).width() > $('.player-container').eq(0).width()){ 
      $(this).css('width', '100%'); 
     } 
    }); 
});

这可能并不适合你，但我认为同样的效果可以用CSS来实现独自一人，由每个视频元素上设置max-width到100%如下：

.player-container video { 
    max-width: 100%; 
}

来源

2014-01-15 19:26:29 SeinopSys

的问题导致，因为你不用去相关视频容器。做这样的事情：

$(document).ready(function() { 
    $('video').each(function() { 
     if ($(this).width() > $(this).parent().width()) 
     { 
      $(this).css('width', '100%'); 
     } 
    }); 
});

来源

2014-01-15 19:32:49 justtal

jQuery each（）不工作？

回答

相关问题