Question

我有四个用css设计的盒子，并排放在右边的边缘。对于最后一个框，我添加了一个删除右边距的类，因此它们都位于同一行。

这是<head>

中的jquery

    <script type="text/javascript">

     $(document).ready(function(){          
        $('div.home-features:last').addClass('last');   
     });  
</script>

这是生成的代码

<div class="content-box2-top"><!-- no content--></div>
<div class="content-box2-center">    

        <div class="home-features">
            <h2>Services</h2>
            <span class="content">
                One point of contact for your international operations eliminating the need for multiple relationships.<br />

            </span>
            <a class="read" href="/getdoc/762a1cb8-2492-4844-8401-5037e7c30afc/Services">Read More</a>
        </div>

        <div class="home-features">
            <h2>Process</h2>
            <span class="content">
                Global access to your accounts, 24 hours a day through our secure online accounting portal.
            </span>

            <a class="read" href="/getdoc/6c7b45da-4e86-44fa-9a15-6d1298576b8a/Process">Read More</a>
        </div>

        <div class="home-features">
            <h2>Benefits</h2>
            <span class="content">
                Alleviating the burden of recruiting and managing in-house accounting teams.
            </span>
            <a class="read" href="/getdoc/592b78e1-f17f-498e-b3bb-f159e4c2d348/Benefits">Read More</a>

        </div>

        <div class="home-features">
            <h2>Reach</h2>
            <span class="content">
                Drawing on the local knowledge and expertise of our partner firms around the world.
            </span>
            <a class="read" href="/getdoc/9e82f2b8-7aaa-417d-9c23-a235c4ff26fd/Reach">Read More</a>
        </div>


</div>
<div class="content-box2-bottom"><!-- no conetnt --></div>

问题是当页面加载时，将“last”类添加到最后一个元素会有延迟。所以它出现在其他三个之下然后ping到位！

如何阻止它执行此操作并显示内联？

Answer 1

我自己的偏好是使用直接css，而不是jQuery：

content-box2-center > div:last,
content-box2-center > div:last-child {
    /* CSS here */
}

当然，您可以使用不同的方法：

content-box2-center {
    visibility: hidden;
    /* or display: none; */
}

使用jQuery {

$(document).ready(
    function(){
        $('div.home-features:last').addClass('last');
        $('content-box-center').show();
    });

Answer 2

这可能是因为页面仍在加载。 $(document).ready(function(){仅在加载页面时发生。

我不确定，但如果你只是将$('div.home-features:last').addClass('last');移到“content-box2-bottom”后面，那么我认为即使没有其他页面加载也会发生这种情况。

Answer 3

当页面准备好被操作时，将执行document.ready代码。这可能是造成延误的原因。

您不能只在last上指定div课程：

<div class="home-features last">

这意味着它将到达具有此类的页面，而无需等待，直到应用之前加载它。

jquery最后一个addclass

3 个答案: