Question

我正在尝试为我的网站制作一个列系统，它看起来像这样：

<div class="container">
    <div class="row">
        <div class="col-13">a</div>
        <div class="col-13" style="background-color: yellow;">a</div>
        <div class="col-13">a</div>
    </div>
</div>

CSS中的位置如下：

.container {
    width: 75%;
    clear: both;
    margin: 0 auto;
}
.row {
    margin-bottom: 40px;
    overflow: hidden;
}
div[class*="col-"] {
    float: left;
    min-height: 1px;
}
.col-13 {
    width: 33.333333%;
    background-color: blue;
}

现在我正在尝试在jQuery中创建一个简单的系统，当<div class="row">中包含colums（<div class="col-13"> etc etc etc）时，其width超过100％。该行未显示。

所以首先我必须找到行内所有列的宽度。我试过这段代码：

$('.row div[class*="col-"]').each(function(index) {
   var _this = $(this);
   var width = _this.width();
   var parentWidth = _this.offsetParent().width();
   var percent = Math.round(100*width/parentWidth);
   console.log('The elements width is '+percent+'%');
});

但是当我尝试使用这个HTML代码时：

<div class="row">
    <div class="col-13">a</div>
    <div class="col-13" style="background-color: yellow;">a</div>
    <div class="col-13">a</div>
</div>

预期输出
3x 33.333333%，因为我有3x <div class="col-13">元素width 33.333333%。

实际输出
3x 25%，我猜是因为.container的宽度为75%并且计算了它，但我不知道为什么。

之后我想计算它，但我不知道该怎么做。

Demo

Answer 1

更改

var parentWidth = _this.offsetParent().width();

到

var parentWidth = _this.parent().width();

这是因为offsetParent()将搜索祖先的第一个定位祖先。在您的示例中，就我所见，这将返回html元素。

没有指定选择器的

parent()将返回最接近的父元素。在您的示例中，这将返回.row。

获取行的宽度

1 个答案: