2016-04-27 12 views
0
var t = 0, i = 0; 
var letter = document.createElement('span') 
letter.id = "x" + t + "x" + i; 
letter.innerHTML = text[t]; 
highlight.appendChild(letter); 
var position = $("#" + "x" + t + "x" + i).position(); 

Dies ist der Code und es sagt immer wieder, dass der Brief nicht definiert ist.Wie bekomme ich die Position des Elements, nachdem ich es in javascript und jquery an die Eltern angehängt habe?

+0

-IDs können nicht mit Zahlen beginnen. – SLaks

+0

das Problem war, dass die Positionen für Zeilenumbrüche nicht aktualisiert werden –

+1

In der HTML 5-Spezifikation IDs können mit Zahlen beginnen. Siehe http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html. – cstopher

Antwort

1

Unter der Annahme, dass highlight ein tatsächlicher DOM-Knoten (nicht undefiniert) ist und text zuvor definiert wurde, ist die wahrscheinlichste Ursache die Ausführung des Skripts, bevor das DOM geladen wurde. Versuchen Sie, Ihr Skript direkt vor dem schließenden </body> -Tag an den unteren Rand Ihres HTML zu setzen.

Hier ist eine Geige mit dem Arbeitscode: https://jsfiddle.net/n9xk85b7/

+0

var text = ["ab", "cde"]; var highlight = document.getElementById ('highlight'); var t = 0, i = 0; var Buchstabe = document.createElement ('span') letter.id = t + "x" + i; letter.innerHTML = "asdfasdfasdfasdfasdfasdfasdf
"; highlight.appendChild (Buchstabe); var Buchstabe = document.createElement ('span') letter.id = t + "x" + i; letter.innerHTML = Text [t]; highlight.appendChild (Buchstabe); var position = $ ("#" + t + "x" + i) .position(); document.getElementById ('Ergebnis'). InnerHTML = "top:" + Position.top + ", links:" + position.left; –

+0

Wenn Sie sehen, dass ein Zeilenumbruch von einem anderen angehängten Element angezeigt wird, erhält es nicht den richtigen oberen Offset –

+0

Ich fand, dass, wenn ich nicht append, sondern innerhtml es funktioniert –