2010-12-01 8 views
9

Ich habe ein Problem mit einem Element mit jquery. Ich baue den Namen in einem var wie:Jquery - Erhalte Element durch ID und konstruiere die ID in String

var myId = "#" + myGotId; 

$(myId).attr("title", "changed"); 

$ (myId) wird leer zurückgegeben. Ich möchte mein Element durch ID erhalten, aber meine Id dynamisch verbindende Zeichenfolgen konstruieren.

bearbeitet von @Pointy — zusätzlichen Code in einem Kommentar vom OP geliefert:

var form = $('form#formDefaultValue'); 
$(':submit', form).click(function(event) { 
    event.preventDefault(); 
    $.post(form.attr('action'), form.serialize(), function(data, status, XMLHttpRequest) { 
    if (status == 'success') { 
     $("#msgInformation").html("Your changes have been successfully saved."); 
     jQuery("#spanDefaultValue").attr("class", "db"); 
     var g = indexNodeSelected; 
     g = g.replace("\\", "\\\\\\\\"); 
     $('#'+ g).find("span").attr("class", ""); 
    } 
+2

sollte es. Überprüfen Sie, ob myId den erwarteten Wert hat. – Quentin

+0

Was ist der Wert von 'myGotId'? Bist du sicher, dass du nicht "#" + "myGotId" 'meinst? Wenn ein Element mit dieser ID nicht existiert, hilft Ihnen weder das dynamische Verknüpfen von Strings noch etwas anderes. – darioo

+0

David ist korrekt, überprüfen Sie den Wert für 'myGotId', um sicherzustellen, dass 'myId' auf den entsprechenden Wert gesetzt wird. Hier ist ein Arbeitsbeispiel mit Ihrem Code. http://www.jsfiddle.net/subhaze/kjpNN/ – subhaze

Antwort

18

Ich weiß nicht genau, was passiert ist, weil Sie nicht viel Code geschrieben haben, aber stellen Sie sicher, dass Ihre Javascript-Code ausgeführt wird nach das Element mit Ihrem Ziel „id "Wert wurde in das DOM aufgenommen. Wenn Sie diese haben:

<html> 
    <head> 
    <script> 
     var myId = '#' + myGotId; 
     $(myId).whatever(); 

dann arbeiten, dass nicht, weil die aktuelle Seite nicht gesehen worden sind, wenn der Code ausgeführt wird.

Stattdessen versuchen Sie dies:

<script> 
    $(function() { 
     var myId = '#' + myGotId; 
     // ... 
    }); 

Es ist auch wichtig, um sicherzustellen, dass Ihre „myGotId“ string ist genau der Wert, den Sie erwarten (das heißt, der Wert in das Attribut „id“ codiert Ihrer Zielelement).

bearbeiten Wenn Sie denken, dass Sie richtig die „id“ sind konstruieren, dann könnte man dies als eine Alternative versuchen:

$(document.getElementById(myGotId)).whatever() 

Mit anderen Worten, können Sie „wrap“ ein einfaches DOM-Element in einem jQuery-Objekt, indem Sie einfach die $()-Funktion übergeben. Wenn das funktioniert, könnte das Problem sein, dass Ihr "ID" -Wert die Selektor-Engine irgendwie verwirrt. Enthält der "id" -Wert "." zufällig? Wie dieses Beispiel zeigt, sollte Ihr Code funktionieren: Stellen Sie sicher, dass Sie das Skript ausführen, nachdem das Element, das Sie erhalten möchten, erstellt wurde.

+0

meine Freunde, das ist mein gesamter Code: –

+0

var form = $ ('form # formDefaultValue'); $ (': submit', form) .click (Funktion (Ereignis) { event.preventDefault(); $ .post (form.attr ('Aktion'), form.serialize(), Funktion (Daten, status, XMLHttpRequest) { if (status == 'Erfolg') { $ ("# msgInformation") .html ("Ihre Änderungen wurden erfolgreich gespeichert."); jQuery ("# ​​spanDefaultValue"). attr (" Klasse "," db "); var g = indexNodeAusgewählt; g = g.replace (" \\ "," \\\\\\\ "); $ ('#' + g)) .find . („span“) attr („Klasse“, „“);} –

+0

ich werde den Code, um Ihre Frage bewegen – Pointy

1

Sie benötigen die zusätzliche Variable? Versuchen Sie, ohne es, wie folgt aus:

$("#" + myGotId).attr("title", "changed"); 
+0

Es funktioniert nicht. Vielleicht haben die Sonderzeichen im Namen Auswirkungen: var g = indexNodeSelected; g = g.replace ("\\", "\\\\\\\"); $ ("#" + g) .attr ("Titel", "geändert"); Dies ist die ID meines Elements, und mit vier "\\\\" funktioniert es: //$("WindowsAdapter-8CD2DEB979A0188\\\TextBox-8CD2DEB9E5CECC4").attr("title "," changed "); –

+0

es hat hart codierte Werte –

+0

es Arbeit doenst, wenn ich die id dinamically in meiner Variablen konstruieren –

0

Stellen Sie sicher, dass die ID korrekt ist.

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://code.jquery.com/jquery-1.4.4.js"></script> 
</head> 
<body> 

<div id="mydiv">Hello</div> 

<script> 
var myGotId = 'mydiv'; 
var myId = "#" + myGotId; 
$(myId).attr("title", "changed"); 
</script> 

</body> 
</html> 
+0

Wenn ich Inspektor von Firebug verwenden, gibt es das Element erstellt. Ich denke, vielleicht beeinflussen die Sonderzeichen im ID-Namen –

2

Der Grund Ihrer jQuery ist nicht wie erwartet funktioniert, weil es ausgeführt wird, bevor das DOM vollständig in den Browser geladen wird.

Setzen Sie Ihren jQuery-Code in eine Dokument bereit-Funktion und es wird funktionieren.

$(document).ready(function() { 
    // code that will run once the entire DOM is loaded into the browser 
}); 

Beispiel die Homepage =>http://mikegrace.s3.amazonaws.com/forums/stack-overflow/example-get-element-by-constructed-string.html

Beispiel Firebug-Konsole Ausgabe

Example Firebug console output

Was ist hier passiert?

  1. sobald das Skript geladen es
  2. ‚noch nicht bereit sein Dom kann‘
  3. console.log Ausgabe
  4. jQuery-Selektor zurückgegeben nichts
  5. DOM vollständig geladen in den Browser starten Sie das Dokument fertig Funktion ausführt gestartet
  6. jQuery-Selektor zurückgegebenen Ergebnisse erwartet

Warum?

Scripts geladen werden können, bevor ein Browser eine Chance hat, den HTML-Code auf einer Seite zu analysieren. Bevor ein Browser das DOM vollständig analysieren und seine DOM-Struktur erstellen kann, kann er Ihnen nicht sagen, ob ein Element existiert oder nicht. Aus diesem Grund führt das Ausführen des jQuery-Selektors, bevor das Dokument fertig ist, häufig zu unerwarteten Ergebnissen.

Beispiel Skript

//run possibly before DOM is loaded into browser 
var selector = "#crazy-image"; 
console.log("DOM may not be ready yet"); 
console.log($(selector)); 
$(document).ready(function() { 
    // code that will run once the entire DOM is loaded into the browser 
    console.log("DOM ready"); 
    console.log($(selector)); 
});