Bild in Spannweite einfügen

Question

Ich habe 2 Zeilen, die erste hat den ganzen Text und die zweite wird die Fußnoten und zusätzliche Bilder enthalten.

In der Textzeile möchte ich ein kleines Bild zeigen, um den Leser darauf aufmerksam zu machen, dass es eine Fußnote gibt. Ich möchte dies mit jquery tun, ich versuche, die ursprüngliche Position zu bekommen, aber es funktioniert nicht. Ich denke, weil ich versuche, die Position der Klasse Instant der Spanne zu bekommen. Aber ich weiß nicht, wie man es von der Spanne bekommt (mit der Klasse b_footnote!).

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

hier einige Beispiele 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> 

ich es in die zweiten Reihe wie diese: Ich weiß nicht, ob das Problem mit zeigen den Hinweis Bild auf dem ursprünglichen Platz in der verursacht Text.

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

andere Lösungen sind ebenfalls willkommen.

Answer 1

Um wie Sie die CSS-Position definiert, sollten Sie

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

verwenden Um das Bild nach der Spanne Position einfügen, können Sie jQuery verwenden .after()^[docs]

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

Answer 2

sollten Sie position() verwenden oder vermeiden es in jquery Einwickeln

$('#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 wäre besser, weil Sie weniger Anrufe zu tätigen und keine Overhead hat, aber ich denke, es funktioniert nur mit Inline-Styles