jquery last addclass
i have four boxes that are styled with css and sit side by side with a margini on the right. for the last box i am adding a class that removes the right margin so they all sit on the same line.
here is the jquery that is in the <head>
<script type="text/javascript">
$(document).ready(function(){
$('div.home-features:last').addClass('last');
});
</script>
here is the code generated
<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>
the problem is that when the page loads there is a delay in adding the "last" class to the last element. so it appears under the other three and then pings in to place!
how can i stop it from doing this and just appear inline?
My own preference would be to use direct css, rather than jQuery:
content-box2-center > div:last,
content-box2-center > div:last-child {
/* CSS here */
}
You could, of course, use a different approach:
content-box2-center {
visibility: hidden;
/* or display: none; */
}
with the jQuery {
$(document).ready(
function(){
$('div.home-features:last').addClass('last');
$('content-box-center').show();
});
It's probably because of the page still loading. $(document).ready(function(){ only happens when the page is loaded.
I'm not sure, but if you just moved $('div.home-features:last').addClass('last'); to be after "content-box2-bottom" then I think it would happen even without the rest of the page loading.
The document.ready code is executed when the page is ready to be manipulated. This will probably be the cause of the delay.
Can you not just specify the last class on the div:
<div class="home-features last">
This means it will arrive on the page with this class in place without having to wait untill its loaded before applying.
加载中,请稍侯......
精彩评论