在跨度位置插入图像

insert image at span position

本文关键字：插入 图像 位置      更新时间：2023-09-26

我有两行，第一行包含所有文本，第二行包含脚注和其他图像。

在文本行中，我想显示一个小图像，提醒读者有脚注。我想用jquery来做这件事，我试图获得原始位置，但它不起作用。我想是因为我试图得到类的位置的跨度瞬间。但我不知道如何获得它的跨度（使用类b_脚注！）。

$('#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;
}

其他解决方案也很受欢迎。

要获得您定义的CSS位置，您应该使用

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

要在span位置后插入图像，可以使用jQuery的.after()[docs]

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

您应该使用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会更好，因为您可以进行更少的调用并且没有开销，但我认为它只适用于内联样式

相关文章：