Question

我需要使用特定的类更改所有div元素的宽度。例如：

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

所有DIV的初始宽度均为23％。具有“第一”或“最后”类别的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

Answer 2

替换它：

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

有了这个：

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

Answer 3

您可能已在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 4

你也可以使用像

这样的代码

$（最后）的CSS（ '宽度'，（23 + 1）+ '％'）;

Answer 5

$('[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);
    }
})

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

5 个答案: