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会更好，因为你拨打的电话更少而且没有开销，但我认为它仅适用于内联样式

在跨度位置插入图像

2 个答案: