javascript - 如何更改给定特定类的所有元素的宽度？

Question

我需要更改具有特定类的所有 div 元素的宽度。例如:

<div class="grid1 first">
<div class="grid2">
<div class="grid3">
<div class="grid4 last">

所有 DIV 的初始宽度均为 23%。具有“first”或“last”类的 DIV 需要额外增加 1% 的宽度。我试过这段代码:

var addwidth = 0;
$("[class^=grid]").each(function() {
   if ($(this).hasClass("first") || $(this).hasClass("last")) {
       addwidth += $(this).width() + 1 + "%";
       $(this).width(addwidth);
   }
});

谢谢。

Answer 1

如果不需要动态宽度，可以使用 CSS 来实现:

.first, .last {
    width: 24%;
}

您可以动态计算宽度，但您必须解决 jQuery 的 width() 和 css() 方法将返回以像素为单位的宽度这一事实.为此，您可以获取父级的宽度并计算该子级占据的百分比，然后更新该值并设置子级的宽度:

$(".first, .last").each(function () {
    var that = $(this),
        parentWidth = that.parent().width(),
        width = that.width(),
        percentage = parseInt((width/parentWidth)*100, 10)
    ;

    that.css("width", (percentage + 1) + '%');
});

Working Demo