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

您可以动态计算宽度，尽管您必须解决 jQuerywidth()和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) + '%');
});

工作演示

Answer 2

您可能在 css 中设置了初始宽度“23%”。
在您的代码中，您正在进行整数和字符串的连接，这将不起作用，因此将该代码分成两行，如下所示。

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

Answer 3

$('[class^="grid"]').each(function(i,element){
    if ( $(element).is('.first') || $(element).is('.last') ) {
    var width = ( 100 * parseFloat($(element).css('width')) / parseFloat($(element).parent().css('width')) ) + 1 + '%'
      $(element).css('width',width);
    }
})

Answer 4

您也可以使用该代码，例如

$(.last).css('宽度',(23+1)+'%');

Answer 5

替换这个：

addwidth += $(this).width() + 1 + "%";
$(this).width(addwidth);

有了这个：

addwidth += $(this).width() + 1;
$(this).width(addwidth + "%");