Question

我正在运行一个jQuery函数，它应该根据视图的宽度修改视频的宽度。

我的页面中有一堆视频，我想以某种方式将它们调整到视频容器中，它具有固定的宽度。所以在我检查视频宽度是否高于容器的功能之前，所以视频宽度应该更改为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()内放置一个提醒，我只看到一个提醒，它实际上仅为该页面的第一个视频弹出。

Answer 1

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

另外，请尝试使用width()函数（因为它返回一个整数，而不是.css('width')返回的字符串。这对于正在运行的那些比较特别方便。

您的最终代码是：

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

Answer 2

我猜你的选择器错了

而不是使用

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

尝试使用

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

为安全起见，.css（'width'）返回一个数字，而不是像“200px”那样的字符串

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

Answer 3

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

获取一个元素，所以

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

会给出一个TypeError。尝试

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

代替。

Answer 4

.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%;
}

Answer 5

问题的原因是您没有转到相关的视频容器。做这样的事情：

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

jQuery each（）不起作用？

5 个答案: