jquery - 如何使用jquery更改数组中对象的宽度

Question

我的 html 代码中有一些元素，如下所示：

<DIV id="slideshow-container">
    <DIV id="slideshow">
        <ul>
            <li>...</li>
            <li>...</li>
            <li>...</li>
        </ul>
    </DIV>
</DIV>  

现在我将获取 li 元素并使用 jquery 设置其宽度。但我的代码不起作用。
以下是我的代码：

var slides = $('#slideshow li');
var w=$('#slideshow').width();

for(var j=0;j<slides.length;j++){
    slides.get(j).css('width',w);
}

你知道我的错误在哪里吗？
谢谢。

Answer 1

其实这...

slides.css('width', w);

...应该足够了。As.css用作 setter，引用doc：

...为每个匹配的元素设置一个或多个 CSS 属性。

演示。

Answer 2

我会改变：

for(var j=0;j<slides.length;j++){
    slides.get(j).css('width',w);
}

至：

$('#slideshow li').each(function(){
    $(this).width(w);
});

Answer 3

jQuery 解决方案（更慢，更容易实现）

如果您的站点中的其他内容需要 jQuery，并且速度不是您真正关心的问题，那么这是实现相同结果的 jQuery 方法：

$("#slideshow li").width(w);

非 jQuery 解决方案（更快）

jQuery比简单的 javascript dom 操作要慢得多。

为您需要的 javascript 创建一个简单的库 - 重用是好的。

jQuery 是一个非常大的库，用于做如此简单的事情。
注意：示例使用命名空间。封装更好，但命名空间是一个好的开始。

var myNS = {
    elById: document.getElementById,
    elsByParentId: function (id, optionalTagName) {
        var tag = optionalTagName || "*";
        return myNS.elByID(id).getElementsByTagName(tag);
    }
    setWidthForEls: function (els, w) {
        for (var i=0, c=els.length; i < c; i++){
        els[i].style.width = w;
    },
    getWidthOfEl: function (el){
        return el.style.width;
    }
    setWidthForElsFromEl: function (els, el) {
        myNS.setWidthForEls(els, myNS.getWidthOfEl(el));
    }
}  

然后，在您所指的代码部分中，您只需执行以下操作：

myNS.setWidthForElsFromEl(
    myNS.elsByParentID("slideshow","li"),
    myN.elByID("content")
);

Answer 4

改变

 slides.eq(j).css('width',w);

至

 slides.eq(j).css('width',w+'px');

x.width() return 80

虽然css它应该是unit：

x.css('width','80px')

Answer 5

slides.get(j)返回 each 的 DOM 对象<li>，而不是 jQuery 对象。

这应该有效：

$( slides.get(j) ).css('width',w);

或者，而不是for循环：

slides.each(function () {
    $(this).css('width', w);
});

Answer 6

您正在创建这些元素的数组，但实际上您必须在视图上更改它们，使用each并修改this

var w=$('#slideshow').width();
$("#slideshow ul li").each(function() {
    $(this).css("width", w);
});

Answer 7

尝试更换

for(var j=0;j<slides.length;j++){
    slides.get(j).css('width',w);
}

和

slides.each(function () {
    $(this).css('width', w + 'px');
});