jQuery $ .parents() funktioniert nicht richtig

Ich habe einen folgenden Code in meiner HTML-Datei, und ich möchte auf das grand parent eines Elements wie die Tabelle zugreifen, die das große Elternteil von td im folgenden Code ist. Dazu habe ich die folgende jquery-Syntax verwendet, aber sie zeigt "undefined" an. Kann mich irgendjemand leiten, wo das Problem liegt?

<script type="text/javascript"> 

    $(document).ready(function() { 
    alert($('td[id="4"]').parents().eq(1).attr("id")); 
    }); 

</script> 

<title></title> 
</head> 
<body> 
<form id="form1" runat="server"> 
    <div class="ui-layout-center" id="center" runat="server"> 
    <table id="Table1" >    
     <tr id="tr1"> 
      <td id="3" class="cell" > 
       first cell 
      </td> 
      <td id="4" class="cell"> 
      second cell 
      </td> 
     </tr> 
    </table> 
    <br /> 
    <br /> 
    </div> 
</form> 
</body> 
</html>

Quelle

2012-04-13 zeeshan

Es ist nicht "undefined" für mich: http://jsfiddle.net/tt3wC/ Vielleicht ist Ihr tatsächlicher HTML/Code anders. Oh und ja, Sie müssen den Code ausführen, nachdem das DOM geladen wurde, was Sie [wenn Sie das Tutorial lesen] (http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery) wissen würden: * "Wie fast alles, was wir tun Wenn jQuery das Document Object Model (DOM) liest oder manipuliert, müssen wir sicherstellen, dass wir Ereignisse usw. hinzufügen, sobald das DOM bereit ist. "* –

mögliches Duplikat von [jQuery select ancestor] (http: // stackoverflow.com/questions/2200775/jquery-select-ancestor) –

Hat Ihr tatsächlicher Code bereit Handler um es? '$ (function() {...});' –

First off, können Sie Ihren Code nicht ausgeführt werden, bis das DOM geladen wird. Das bedeutet, dass Sie entweder nach dem entsprechenden HTML-Code in der Quelldatei platzieren müssen oder jQuery-Methode des Wartens verwenden, bis das DOM geladen ist:

$(document).ready(function() { 
    alert($('td[id="4"]').parents().eq(0).attr("id")); 
});

Dann Code:

$('td[id="4"]').parents().eq(0)

ist immer die erstes Elternteil des übereinstimmenden Elements td. Das erste Elternteil das tr Tag sein, die es ID alarmiert, nicht die ID des <table> Element, wie Sie hier sehen können: http://jsfiddle.net/jfriend00/rxUEp/

Wenn Sie das Tabellenelement der ID wollen, dann ist es am besten, die tatsächlichen Eltern festlegen, die Sie mit dem Code wollen dies wie:

$(document).ready(function() { 
    alert($('td[id="4"]').closest("table").attr("id")); 
});

weitere Befestigungs Dinge, ID-Werte sollten mit einem Unterstrich oder einen Brief, keine Zahl beginnen und sobald Sie eine gültige ID haben, sollten Sie eine viel effizientere Wähler wie folgt verwenden:

<table id="Table1" > 
    <tr id="tr1"> 
     <td id="cell3" class="cell" > 
      first cell 
     </td> 
     <td id="cell4" class="cell"> 
     second cell 
     </td> 
    </tr> 
</table> 

$(document).ready(function() { 
    alert($('#cell4').closest("table").attr("id")); 
});

P.S. Ein weiterer Grund, warum es gut ist, .closest("table") zu verwenden, um das gewünschte Elternteil zu finden, ist, dass Tabellen alle ein implizites <tbody> Tag haben (auch wenn es nicht in Ihrem HTML ist), was bedeutet, dass das tatsächliche <table> Tag tatsächlich das 3. Elternteil von Ihrem <td> ist. Mit .closest("table") müssen Sie sich nicht um diese Suchdetails kümmern, da jQuery nur die angegebene findet.

Quelle

2012-04-13 15:20:27 jfriend00

ja es hat geklappt ..! Vielen Dank . aber das Problem der gültigen ID ist kein Problem. Es funktioniert gut mit der Nummer – zeeshan

@zeeshan - einige Browser können Sie die Nummer für eine ID verwenden, aber möchten Sie wirklich HTML verwenden, dass einige ältere Browser möglicherweise nicht richtig funktionieren mit? Es ist immer am sichersten, die Regeln zu befolgen und kostet nichts. Wenn Sie die Nummer für etwas anderes verwenden, fügen Sie sie nicht in eine ID ein. Setzen Sie es in ein benutzerdefiniertes Attribut wie 'data-num =" 4 "' und holen Sie das mit '.data (" num ")'. – jfriend00

Wenn Sie speziell wissen, welche übergeordnete Element, das Sie wollen, versuchen Sie am nächsten mit:

$(function() { 
    alert($('td[id="4"]').closest("table").attr("id")); 
});

Auch id Attribute, die mit Zahlen beginnen ungültig sind.

Quelle

2012-04-13 15:15:36

ID-Attribute, die mit Zahlen beginnen, sind unter HTML 4 ungültig. HTML5 erlaubt ihnen, und die meisten Browser übersehen diese Regel sowieso. Immer noch keine gute Idee. – Blazemonger

Sie führen Code für eine Tabelle aus, die noch nicht existiert. Verschieben Sie den <script> Block unter der Tabelle, und es funktioniert (obwohl Sie die tr übergeordnete, nicht die table Eltern abholen werden), oder legen Sie es in eine Onready-Funktion, so dass es nicht ausgelöst wird, bis das gesamte DOM abgeschlossen ist.

Demo: (Alerts zweimal, eine vor dem Tisch, eine nach) http://jsfiddle.net/Fzcv4/1/

Quelle

2012-04-13 15:17:33 ceejayoz

jQuery $ .parents() funktioniert nicht richtig

Antwort

Verwandte Themen