2011-01-03 18 views
3

Ich habe eine ziemlich einfache dynamische HTML-Struktur einer Tabelle, die Links enthält und die Möglichkeit, dass es eine zweite Tabelle mit Links enthalten wird. Ich möchte das html Attribut für die Verbindungen in der Haupttabelle aber nicht in der Sekunde ändern.jQuery Selector

Meine Struktur:

<table> 
<tr><td><a href="www.google.com">link</a></td></tr> 
<tr><td><a href="www.google.com">link</a></td></tr> 
<tr><td><a href="www.google.com">link</a></td></tr> 
<tr><td><a href="www.google.com">link</a></td></tr> 
<tr><td><a href="www.google.com">link</a></td></tr> 
<tr> 
    <td> 
     <table> 
      <tr><td><a href="http://stackoverflow.com">link</a></td></tr> 
      <tr><td><a href="http://stackoverflow.com">link</a></td></tr> 
      <tr><td><a href="http://stackoverflow.com">link</a></td></tr> 
     </table> 
    </td> 
</tr> 

So zum Beispiel würde Ich mag die hrefs alle Änderungen von "www.google.com" auf "www.foo.com". Ich bin in der Lage, das href-Attribut zu ändern, aber ich habe Probleme mit meinem Selektor b/c gibt es Zeiten, in denen die zweite Tabelle nicht existiert.

Mein Stromselektors wie folgt aussieht: $('table a').filter(':not(table:last a)')

Ich bin sicher, dass es nicht der effecient Weg, es zu tun, aber es funktioniert, bis die Möglichkeit, keine zweiten Tabelle ins Spiel kam.

+2

Wie greifen Sie auf die erste Tabelle zu, gibt es eine ID oder eine absolute Referenz, die Sie verwenden können? Ist so, sollte einfach sein, indem Sie '' 'in einem Selektor verwenden, um zu verhindern, dass der Baum weiter als erwartet durchquert wird. –

Antwort

5

Wenn Ihr "Haupt" Tabelle nicht innerhalb einer anderen Tabelle ist, könnten Sie tun:

$('table a:not(table table a)') 

oder äquivalent:

$('table a').not('table table a') 

Update: Performance-weise, Patrick's answer ist viel besser.

+1

Danke Jungs für die tollen Antworten. Ich werde das akzeptieren. Es funktioniert und ich kann nicht sagen, wer zuerst dir oder mririgo unten antwortete. Auch sollte die Performance niemals ein Problem sein, da sie dynamisch erzeugt wird, die Anzahl der Zeilen wird niemals über 25 liegen. –

0

Sie können mit dem Container Ihres Tisches tun.
Wenn es Körper:

$ ("body> table> tr> td> a")

0

Versuchen Sie, die child selector und geben Sie die Haupttabelle eine ID (falls es nicht haben ein bereits):

$('#maintable > tbody > tr > td > a') 

Wo #maintable die ID Ihrer Haupttabelle ist.

Bearbeiten: Sie möchten auch das <tbody> Tag der Tabelle hinzufügen (aus den Gründen in den Kommentaren angegeben).

Dies verwendet grundlegende CSS-Selektoren in neueren Browsern und erfordert keine jQuery-Magie, es sei denn, Sie verwenden einen älteren Browser.

+0

Seien Sie vorsichtig mit '>' wenn es um '

' Elemente geht. Auch wenn es keine '' gibt, werden die meisten Browser eine einfügen, was dazu führt, dass Ihr Selektor fehlschlägt. – user113716

+0

@patrick dw: Guter Punkt. In diesem Fall könnte ein '

' explizit hinzugefügt werden, so dass Sie sicher wissen, dass es da ist, und dann würde der Selektor zu: '$ ('# maintable> tbody> tr> td> a')' –

+0

Ja, Ich befürworte ausdrücklich die explizite Einbeziehung von "

", um die Konsistenz zwischen den Browsern zu gewährleisten. – user113716

1

ich glaube, ich würde lieber tun:

$('table').slice(0, -1).find('a'); 

alle Tabellen finden, dann reduzieren die Menge an alle, aber die letzte, und schließlich eine .find() für die <a> Elemente tun.

Der Grund ist, dass ich in Bezug auf gültige CSS-Selektoren stark voreingenommen bin, so dass querySelectorAll von jQuery erfolgreich verwendet werden kann.

+0

Wie wäre es mit 'Tisch: zuerst'? –

+0

@Felix: Habe gerade ein Update gegeben, um zu erklären warum. Der ': first'-Selektor passt in die Kategorie der ungültigen CSS-Selektoren. Geringfügige Überlegung, wenn nur zwei Tabellen vorhanden sind. – user113716

+0

Ich verstehe. Dachte nur, es sieht schöner aus;) Aber du hast recht ... danke für die Erklärung. –

0

Wenn Sie die dynamisch generierte HTML ändern können Sie wirklich jede Tabelle eine ID-Eigenschaft geben sollte: Ihre Selektoren können

<table id="table1"> ... 
    <table id="table2"> ... 
    </table> 
</table> 

Dann werden einfach

$('#table1').find('a') 

Dies ist nicht wirklich beantworten Ihre Frage, aber dieses Design ist viel wartbarer und einfacher zu ändern.