Question

我尝试使用JQuery获取特定元素的宽度。有时，.width()返回正确的值，有时返回的值太小（这种情况在加载几页时随机发生）

因此，大多数情况下，我在加载页面时会获得正确的值，但有时会有些混乱。

我认为，我的代码触发得太早（当未加载CSS或类似的东西时）可能会导致这种情况，但是即使在我开始使用$(window).bind("load", function(){ ... code goes here ...})之后，情况也没有真正改变。

我的代码：

$(document).ready(function () {

    $(".section-content .feature-details").each(function (index, object) {
        var featureDetails = $(object);
        featureDetails.find(".details-content").width(featureDetails.find(".details-navigation").width());
        console.log(featureDetails.find(".details-navigation").width());
    });

编辑：（如果我执行setTimeout，则一切正常，因此此问题必须与某种形式的异步加载有关，这不够“快”-对吗？）我使用的确切代码：

JavaScript：

$(document).ready(function () {

    // setTimeout(function () {
        $(".section-content .feature-details").each(function (index, object) {
            var featureDetails = $(object);
            featureDetails.find(".details-content").width(featureDetails.find(".details-navigation").width());
            console.log(featureDetails.find(".details-navigation").width());
        });

    // }, 100);

});

HTML：

<div class="feature columns columns-justify-fullwidth columns-vertical-align-center">
                    <div class="feature-details">
                        <div class="details-navigation">
                            <ul>
                                <li><a href="#" class="color-grey-light"><div>Web</div></a></li>
                                <li class="active"><a href="#" class="color-grey-light"><div>Desktop</div></a></li>
                                <li><a href="#" class="color-grey-light"><div>Mobile</div></a></li>
                                <li><a href="#" class="color-grey-light"><div>Datenbanken</div></a></li>
                            </ul>
                        </div>
                        <div class="details-content">
                            <p>
                                Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
                                <br/>
                                <br/> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.
                                Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
                            </p>
                        </div>
                    </div>
                    <div class="showcase"></div>
                </div>

CSS：

.columns {
    display: flex;
}
.columns-justify-fullwidth {
    justify-content: space-between;
}

.columns-vertical-align-center {
    align-items: center;
}

.feature-details .details-navigation {
    display: inline-block;
}

.feature-details .details-navigation ul {
    display: inline-block;
    height: 50px;
    border-bottom: 2px solid #aaa;
}

.feature-details .details-navigation li {
    height: 100%;
    display: inline-block;
    vertical-align: top;
}

.feature-details .details-navigation li:not(:last-child) {
    margin-right: 18px;
}

.feature-details .details-navigation ul a {
    display: table;
    height: 100%;
    font-size: 16px;
}

.feature-details .details-navigation ul a > div {
    display: table-cell;
    padding-bottom: 12px;
    vertical-align: bottom;
}

/*
.feature-details .details-navigation ul li:hover {
    border-bottom: 2px solid #222;
}
*/

.feature-details .details-navigation ul li:hover a {
    color: #222;
}

.feature-details .details-navigation li.active {
    border-bottom: 2px solid #222;
}

.feature-details .details-content {
    margin-top: 16px;
}

.feature .showcase {
    width: 450px;
    height: 450px;
    background-color: #f7f7f7;
}

Answer 1

尝试使用jQuery $( document ).ready，看看结果是否更加一致。我无法获得任何不一致的宽度。

$(document).ready(function() {
  $(".feature-details").each(function(index, object) {
    var featureDetails = $(object);
    featureDetails.find(".details-content").width(featureDetails.find(".details-navigation").width());
    console.log(featureDetails.find(".details-navigation").width());
  })
})

jQuery .width（）返回不一致的值

1 个答案: