2012-03-26 29 views
1

2行あり、最初はすべてのテキストを持ち、2番目は脚注と追加画像を保持します。スパン位置に画像を挿入

テキスト行には、小さな画像を表示して、脚注があることを読者に警告します。 jqueryでこれをやりたいのですが、元の位置を取得しようとしましたが動作しません。 私はスパンのクラスインスタントの位置を取得しようとするので、私は思う。 しかし、私はスパンを得る方法を知らない(クラスb_footnoteで!)。 それは、元の場でヒント像を示すとの問題が発生する場合、私は知らない。

$('#container #book #column1 .b_footnote').each(function(){ 
    console.log($(this)); // goes good 
    console.log($(this).position.left); // undefined 
}); 

ここではいくつかの例のHTMLは、私はこのような第二列にそれを得る

<p> 
en Benkei nog rust vonden. In een vertrek was Yoshitsune met zijn vrouw en jeugdig kind. De Dood stond in het vertrek gereed, en het was beter, dat de Dood zou komen op bevel van Yoshitsune, dan op bevel van den vijand buiten de deur. Zijn kind werd door een bediende gedood, en terwijl hij het hoofd van zijn geliefde vrouw onder den linkerarm nam, stootte hij zijn zwaard diep in haar nek. Na dit te hebben volbracht, pleegde Yoshitsune zelfmoord (hara-kiri).<span class="b_footnote">De buik opensnijden.</span> Benkei echter wachtte den vijand op. Hij stond met zijn groote beenen wijd uitgespreid, zijn rug tegen een rots gedrukt. Toen de dageraad aanbrak, stond hij nog altijd met uitgespreide beenen, terwijl zijn dapper lichaam door duizend pijlen was doorboord. Benkei was dood, maar vallen kon de krachtige held niet. De zon verrees over een man, die een ware held was, en die steeds getrouw was gebleven aan de eenmaal door hem uitgesproken woorden: “Waar mijn meester heengaat, hetzij ter overwinning, of in den dood, ik zal hem volgen.”</p> 

ですテキスト。

.b_footnote { 
    background: yellow; 
    position: absolute; 
    left: 540px; 
    z-index: 99; 
} 

他の解決策も同様に歓迎される。

答えて

1

でのみ動作と思うので良いだろうposition()を使用するか、jqueryので

$('#container #book #column1 .b_footnote').each(function(){ 
    console.log($(this)); // goes good 
    console.log($(this).position().left); //also this.style.position.left 
}); 

this.style.position.leftそれをラップすることは避けてください

$(this).css('position'); 

スパース位置の後に画像を挿入するには、jQueryの.after()[docs]

$("span").after('<img src="link/to/image.jpg" />'); //Select the span and insert the image 
+0

素晴らしい、ありがとう – clankill3r

0

あなたが少ない呼び出しを行うと何のオーバーヘッドはありませんが、私はそれを取得するには、インラインスタイル

+0

は、私が使用して次のエラーを取得すること: ****はTypeError: '未定義' はオブジェクトではありません(評価 'this.position.left') – clankill3r

+0

@ clankill3rはい、スタイルがありませんでした。計算されたスタイルではうまくいかないので、jQueryを使用してください。 :) –