跨度位置插入图像

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会更好，因为你打较少的电话，没有开销，但我认为它只能与内嵌样式的作品