跨度位置插入圖像

Question

我有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; 
} 

其他解決方案也歡迎。

Answer 1

要獲得CSS定位的位置，應該使用

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

要在跨度位置後插入圖像，可以使用jQuery的.after()^[docs]

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

Answer 2

你應該使用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會更好，因爲你打較少的電話，沒有開銷，但我認爲它只能與內嵌樣式的作品