2011-01-06 10 views
0

私はCSSでスタイリングされ、右側にマージニを並べて座っている4つのボックスを持っています。最後のボックスのために、私は右マージンを削除するクラスを追加しているので、それらはすべて同じ行にあります。ここjquery last addclass

コードが

<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> 

をここ<head>

<script type="text/javascript"> 

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

であるjQueryの生成されている問題は、ページがロードされたときに「最後」を追加することに遅延があるということですクラスを最後の要素に追加します。それは他の3人の下に現われてから、場所を尋ねます!

これをやめてインラインで表示するにはどうすればよいですか?

答えて

0

これはおそらくページがまだ読み込まれているためです。 $(document).ready(function(){は、ページが読み込まれたときにのみ発生します。

私は確信していませんが、ちょうど$('div.home-features:last').addClass('last');を "content-box2-bottom"の後に移動させた場合、残りのページがなくても起こると思います。

+0

JavaScriptコードを移動しても、違いはありません。これがdocument.readyの全体のポイントです。 –

+1

content-box2-bottomの後に膨大な量のコードがあるとします。 OPが(最後に好ましい方法である)ASPを使って 'last'クラスを追加できない場合は、試してみる価値があります。 –

0

page.readyコードは、ページが操作可能な状態で実行されます。おそらく遅延の原因になるでしょう。

あなただけdivlastクラスを指定することはできません:

<div class="home-features last"> 

これは、それが適用する前に、そのロードされた刚性待つことなく、所定の位置に、このクラスでページに到着することを意味します。

+0

divはasp.netリピータで生成されません。 – user1417094

+0

データソースは何ですか?もし行が最後の行であるときに詰め込むメタデータを生成することができれば、それはclass属性内の '<% %>'に含めることができます。 –

1

私の好みではなくjQueryのよりも、直接CSSを使用することです:

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

あなたは、もちろん、異なるアプローチを使用できます:jQueryの{

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

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