[Erledigt] Nächstes <table> mit JS finden (jQuery)

dreamcatcher · 01.03.2011, 16:15

Hallo,

Worum geht es ?
Ich möchte gerne ein <table> verstecken wenn man auf einen Button (Genauer gesagt ein A Element) klickt.

Struktur:

PHP-Code:

  html.html

 
<div class=main>

<p>bla<a id=hide>hide</a></p>

<table><tbody>[..]</tbody></table>

 
<p>bla<a id=hide>hide</a></p>

<table><tbody>[..]</tbody></table>

 
<p>bla<a id=hide>hide</a></p>

<table><tbody>[..]</tbody></table>

</div>

 
 
 
js.js

$("#hide").click(function(){

    $(this).parent('p').next('table').hide();

});

So funktioniert der Knopf mit der ersten Table.

Wenn man jedoch auf den zweiten <a> Knopf drückt passiert gar nicht, bei den anderen ebenfalls nicht.

Nur der erste funktioniert.... und ich verstehe kein bisschen warum.
Die Sufu hatte ich bereits genutzt, welche mich auf das "parent()" brachte.

Google zeigte mir auch keine guten Ergebnisse an bzw. next() im Zusammenhang mit table.

Wie komme ich von den anderen <a> auf das darauf folgende <table> ?
Vielen Dank.

BlackScorp · 01.03.2011, 17:57

jquery hat eine next() funktion

RustyXXL · 01.03.2011, 18:03

da id's in html eigentlich eindeutig sein sollten vermute ich mal, dass jscript deine funktion nur dem ersten Element mit der id "hide" zuweist.

BlackScorp · 01.03.2011, 18:06

mach mal die IDs weg:

PHP-Code:

  <div class=main>

<p>bla<a class="hide">hide</a></p>

<table><tbody>[..]</tbody></table>

 
<p>bla<aclass="hide">hide</a></p>

<table><tbody>[..]</tbody></table>

 
<p>bla<aclass="hide">hide</a></p>

<table><tbody>[..]</tbody></table>

</div>

 
$('#main p a').each(fuction(){

$(this).click(function(){

$(this).next('table').hide();

});

});

nikosch · 01.03.2011, 22:09

Zitat:

$('#main p a').each(fuction(){
$(this).click(function(){
$(this).next('table').hide();
});
});

Bitte kein each, wo es nicht notwendig ist.

PHP-Code:

  $('#main p a').click(function(){
  $(this).next('table').hide();
});

sollte dasselbe leisten.

phpdummi · 01.03.2011, 22:43

PHP-Code:

  $('#main p a')

ruft doch dann auch intern each auf, wie sollte sonnst an alle Elemente ein Event-Handler geklebt werden? Oder ist jQuery so clever und delegiert das automatisch ans nächst höhere Element und fängt ab?

nikosch · 01.03.2011, 23:12

Naja eben. Aber in each wird this wieder mit einer jQuery-Menge belegt um dann an (on)click verarbeiten zu können. Das ist doch unnütz.

phpdummi · 01.03.2011, 23:42

Ach so wars gemeint, okay! Gibt es eigentlich schon ein jQuery Plugin das DOM Benutzung protokolliert und damit aufzeigt wie oft (meistens suboptimal) am DOM rumgemacht wird?
Muss ja nicht gleich Optimierungen vorschlagen .. jQuery Lint scheint mir nicht das Richtige. Ich würde besonders Anfängern (aber auch mir selbst) gerne etwas die Augen öffnen, schließlich macht jQuery es ja wirklich viel zu einfach unnütze Elemente auszuwählen usw.

dreamcatcher · 02.03.2011, 08:12

Danke, es hat funktioniert, in dem ich den Ratschlag mit der ID berücksichtigt habe und es als class umgeschrieben habe.

So ein dummer Fehler, obwohl mir das hier gesagte war mir bereits bekannt war habe ich es nicht "gesehen".

BlackScorp · 02.03.2011, 08:44

Zitat:

Zitat von nikosch

Bitte kein each, wo es nicht notwendig ist.

PHP-Code:

  $('#main p a').click(function(){

  $(this).next('table').hide();

});

sollte dasselbe leisten.

da ich auch und dann habe ich festgestellt dass es im IE nicht funktioniert ohne each.

hatte mal

PHP-Code:

  $('ul#liste li').click(function(){

$(this).fadeOut(1000);

});

verwendet. damit konnte ich immer nur das erste li ausfaden im IE, im FF hats funktioniert. Danach habe ich each angewandt und konnte alle li's entfernen

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
JQuery Plugins Lizenzen (Kommerziell)	dreamcatcher	Off-Topic Diskussionen	13	11.02.2011 00:35
Einfaches JQuery resize und scoll läuft nicht	smilla	JavaScript, Ajax und mehr	5	08.02.2011 20:44
jQuery, einem DOM-Knoten eine Payload anhängen	Chriz	JavaScript, Ajax und mehr	6	22.12.2010 15:31
jQuery - Text an Cursorposition einfügen	Koala	JavaScript, Ajax und mehr	5	11.11.2010 21:28
Bin noch ein Anfänger mit jquery bitte um hilfe	bomber007	JavaScript, Ajax und mehr	4	19.08.2010 23:34
[Erledigt] jQuery Slider - In eine Richtung sperren	Trainmaster	JavaScript, Ajax und mehr	2	08.08.2010 16:06
[Erledigt] Statistik mit jQuery	DJ_RhoxxZ	JavaScript, Ajax und mehr	6	25.07.2010 17:47
jquery: dialogbox funktioniert nicht	Dreamwatcher	JavaScript, Ajax und mehr	16	22.07.2010 18:22
jQuery findet Element nicht	ByStones	JavaScript, Ajax und mehr	8	11.06.2010 14:03
jQuery Plug scroll to - wie einbetten?	mxxxx	JavaScript, Ajax und mehr	5	24.04.2010 18:12
[Erledigt] [Erledigt] jQuery Endlos Scrolling Umlaute	kn0wledge	JavaScript, Ajax und mehr	0	18.10.2009 19:29
[Erledigt] 'Next' Button	BjoernSchmitt	PHP Tipps 2009	2	29.03.2009 13:46
[Erledigt] jQuery Dateien nachladen	Phoscur	JavaScript, Ajax und mehr	7	14.03.2009 13:44
jQuery Plugin - so richtig?	stayInside	JavaScript, Ajax und mehr	5	23.02.2009 12:34
For Schleife mit jQuery	phpbeginner	JavaScript, Ajax und mehr	3	22.11.2008 22:35

01.03.2011, 16:15
dreamcatcher Erfahrener Benutzer Registriert seit: 28.12.2010 Beiträge: 599 PHP-Kenntnisse: Anfänger	[Erledigt] Nächstes <table> mit JS finden (jQuery) Hallo, Worum geht es ? Ich möchte gerne ein <table> verstecken wenn man auf einen Button (Genauer gesagt ein A Element) klickt. Struktur: PHP-Code: `html.html <div class=main> <p>bla<a id=hide>hide</a></p> <table><tbody>[..]</tbody></table> <p>bla<a id=hide>hide</a></p> <table><tbody>[..]</tbody></table> <p>bla<a id=hide>hide</a></p> <table><tbody>[..]</tbody></table> </div> js.js $("#hide").click(function(){ $(this).parent('p').next('table').hide(); });` So funktioniert der Knopf mit der ersten Table. Wenn man jedoch auf den zweiten <a> Knopf drückt passiert gar nicht, bei den anderen ebenfalls nicht. Nur der erste funktioniert.... und ich verstehe kein bisschen warum. Die Sufu hatte ich bereits genutzt, welche mich auf das "parent()" brachte. Google zeigte mir auch keine guten Ergebnisse an bzw. next() im Zusammenhang mit table. Wie komme ich von den anderen <a> auf das darauf folgende <table> ? Vielen Dank. Geändert von dreamcatcher (01.03.2011 um 16:50 Uhr).


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

01.03.2011, 17:57
BlackScorp Erfahrener Benutzer Registriert seit: 25.09.2009 Beiträge: 2.114 PHP-Kenntnisse: Fortgeschritten	jquery hat eine next() funktion __________________ Mein kleines Projekt -Cruel Online- 5 von 3 Leuten können kein Bruchrechnen

01.03.2011, 18:03
RustyXXL Erfahrener Benutzer Registriert seit: 03.03.2010 Beiträge: 221 PHP-Kenntnisse: Fortgeschritten	da id's in html eigentlich eindeutig sein sollten vermute ich mal, dass jscript deine funktion nur dem ersten Element mit der id "hide" zuweist.

01.03.2011, 18:06
BlackScorp Erfahrener Benutzer Registriert seit: 25.09.2009 Beiträge: 2.114 PHP-Kenntnisse: Fortgeschritten	mach mal die IDs weg: PHP-Code: `<div class=main> <p>bla<a class="hide">hide</a></p> <table><tbody>[..]</tbody></table> <p>bla<aclass="hide">hide</a></p> <table><tbody>[..]</tbody></table> <p>bla<aclass="hide">hide</a></p> <table><tbody>[..]</tbody></table> </div> $('#main p a').each(fuction(){ $(this).click(function(){ $(this).next('table').hide(); }); });` __________________ Mein kleines Projekt -Cruel Online- 5 von 3 Leuten können kein Bruchrechnen

01.03.2011, 22:43
phpdummi Erfahrener Benutzer Registriert seit: 06.06.2008 Beiträge: 1.631 PHP-Kenntnisse: Anfänger	PHP-Code: `$('#main p a')` ruft doch dann auch intern each auf, wie sollte sonnst an alle Elemente ein Event-Handler geklebt werden? Oder ist jQuery so clever und delegiert das automatisch ans nächst höhere Element und fängt ab? __________________ "Nobody is as smart as everybody" - Kevin Kelly — The best things in life aren't things

01.03.2011, 23:12
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Naja eben. Aber in each wird this wieder mit einer jQuery-Menge belegt um dann an (on)click verarbeiten zu können. Das ist doch unnütz. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

01.03.2011, 23:42
phpdummi Erfahrener Benutzer Registriert seit: 06.06.2008 Beiträge: 1.631 PHP-Kenntnisse: Anfänger	Ach so wars gemeint, okay! Gibt es eigentlich schon ein jQuery Plugin das DOM Benutzung protokolliert und damit aufzeigt wie oft (meistens suboptimal) am DOM rumgemacht wird? Muss ja nicht gleich Optimierungen vorschlagen .. jQuery Lint scheint mir nicht das Richtige. Ich würde besonders Anfängern (aber auch mir selbst) gerne etwas die Augen öffnen, schließlich macht jQuery es ja wirklich viel zu einfach unnütze Elemente auszuwählen usw. __________________ "Nobody is as smart as everybody" - Kevin Kelly — The best things in life aren't things

02.03.2011, 08:12
dreamcatcher Erfahrener Benutzer Registriert seit: 28.12.2010 Beiträge: 599 PHP-Kenntnisse: Anfänger	Danke, es hat funktioniert, in dem ich den Ratschlag mit der ID berücksichtigt habe und es als class umgeschrieben habe. So ein dummer Fehler, obwohl mir das hier gesagte war mir bereits bekannt war habe ich es nicht "gesehen".