[JavaScript] JQuery: bestimmtes Element erwischen

**onemorenerd** · 17.11.2008, 20:12

Re: [JavaScript] JQuery: bestimmtes Element erwischen

Original geschrieben von Dennis79
ich möchte per JQUery quasi ein belieibiges Element finden können, ohn dieses über die ID ansprechen zu müssen, denn ich will nicht für alle Tags ID's vergeben müssen...

Ja welches Element denn? JQuery muss das wissen, du mußt es ihm sagen. Also überlege dir, wie du das Element im DOM-Baum finden kannst. Das einfachste ist natürlich die ID, weil sie so schön einzigartig ist.
Weitere Möglichkeiten: http://docs.jquery.com/API/1.1.2/DOM...sing/Selectors

**PHP-Desaster** · 17.11.2008, 22:13

In Prototype könntest du mit up('tr') arbeiten. Da ich jetzt keine Ahnung von jQuery habe sieht mir auf dem ersten Blick parent( expr ) nach einer Methode mit der gleichen Funktionalität aus.

**Dennis79** · 18.11.2008, 19:18

N'Abend,

@onemorenerd: Das ist genau mein Problem: wie sage ich JQuery, welches Element ich meine.

Hatte gehofft, dass mir das mal jemand so erklären kann, das ich es verstehe.

@PHP-Desaster: Damit hab ich es leider auch schon probiert.

Also ich habe parent(), next(), prev() und find() getestet, so wie z.B. auch next().next().next()....

Es klappt NICHTS. Ich kriege es auch nicht hin das nächste oder vorherige <tr> zu erwischen.
Also bei einer Verkettung von ausreichend parent() bzw prev() müsste ja die Zeile darüber mal irgendwann dabei sein...

Ich wäre so glücklich, wenn ich das kapieren würde.....

Hier mal ein (nicht funktionierendes) einfaches Beispiel:

PHP-Code:


<html>

<head>

<title>JQuery Tests</title>

<script type="text/javascript" src="js/jquery126min.js"></script>          



 <script type="text/javascript">                                         

    

     $(document).ready(function() {

       

       

           $("a").click(function() {

            



                 alert('test');

                 $(this).prev("tr").hide();



           });

           



     

     });

                                     

 </script> 

</head>

<body>

    <table>

        <tr>

            <td>1</td>

            <td>Apfel</td>

            <td><b>5</b></td>

            <td><a href="#"><img src="bla.jpg" width="20px" height="20px"></a></td>

        </tr>

        <tr>

            <td>2</td>

            <td>Banane</td>

            <td><b>12</b></td>

            <td><a href="#"><img src="bla.jpg" width="20px" height="20px"></a></td>

        </tr>

        <tr>

            <td>3</td>

            <td>Kirsche</td>

            <td><b>2</b></td>

            <td><a href="#"><img src="bla.jpg" width="20px" height="20px"></a></td>

        </tr>

         <tr>

            <td>4</td>

            <td>Salat</td>

            <td><b>11</b></td>

            <td><a href="#"><img src="bla.jpg" width="20px" height="20px"></a></td>

        </tr>

    </table>

</body>

</html>

**phpMorpheus2** · 19.11.2008, 16:41

Vll. so irgendwie?

PHP-Code:


<html>

<head>

<title>JQuery Tests</title>

<script type="text/javascript" src="jquery.js"></script>          



 <script type="text/javascript">                                         

     $(document).ready(function() {

           $("a").click(function() {

                   $("#test1").hide("fast");



           });

     });                                

 </script> 

</head>

<body>

    <table>

        <tr>

            <td>1</td>

            <td>Apfel</td>

            <td><b>5</b></td>

            <td><a href="#"><img src="bla.jpg" width="20px" height="20px"></a></td>

        </tr>

        <tr>

            <td>2</td>

            <td>Banane</td>

            <td><b>12</b></td>

            <td><a href="#"><img src="bla.jpg" width="20px" height="20px"></a></td>

        </tr>

        <tr>

            <td>3</td>

            <td>Kirsche</td>

            <td><b>2</b></td>

            <td><a href="#"><img src="bla.jpg" width="20px" height="20px"></a></td>

        </tr>

         <tr>

            <td>4</td>

            <td>Salat</td>

            <td><b>11</b></td>

            <td><a href="#" id="test1"><img src="bla.jpg" width="20px" height="20px"></a></td>

        </tr>

    </table>

</body>

</html>

**Dennis79** · 19.11.2008, 18:46

Nein, d.h. ja: so klappt's natürlich.

Aber genau diesen Weg (das Verwenden von ID's) würde ich ja gerne vermeiden...

**phpMorpheus2** · 20.11.2008, 09:27

Original geschrieben von Dennis79
Nein, d.h. ja: so klappt's natürlich.

Aber genau diesen Weg (das Verwenden von ID's) würde ich ja gerne vermeiden...

Du hast natürlich recht.
Sonst müsste man jeder neu erzeugen Zeile einer Tabelle eine individuelle ID zuweisen.
ALSO anders (so, wie du es wahrscheinlich haben möchtest

PHP-Code:


<html>

<head>

<title>JQuery Tests</title>

<script type="text/javascript" src="jquery.js"></script>          



 <script type="text/javascript">                                         

     $(document).ready(function() {

           $("tr").click(function() {

                   $(this).hide("slow");



           });

     });                                

 </script> 

</head>

<body>

    <table>

        <tr>

            <td>1</td>

            <td>Apfel</td>

            <td><b>5</b></td>

            <td><a href="#"><img src="bla.jpg" width="20px" height="20px"></a></td>

        </tr>

        <tr>

            <td>2</td>

            <td>Banane</td>

            <td><b>12</b></td>

            <td><a href="#"><img src="bla.jpg" width="20px" height="20px"></a></td>

        </tr>

        <tr>

            <td>3</td>

            <td>Kirsche</td>

            <td><b>2</b></td>

            <td><a href="#"><img src="bla.jpg" width="20px" height="20px"></a></td>

        </tr>

         <tr>

            <td>4</td>

            <td>Salat</td>

            <td><b>11</b></td>

            <td><a href="#"><img src="bla.jpg" width="20px" height="20px"></a></td>

        </tr>

    </table>

</body>

</html>

So wird IMMER der auf nächster Ebene vorhandene <tr> Tag ausgeblendet von anfand bist </tr> Ende !

**phpMorpheus2** · 20.11.2008, 10:33

WOBEI !
Man merke:
Nun wird der JavaScript Code auch bei klick neben der Verlinkung in das <tr> Feld aktiviert.
Sprich, wenn du z.B. auf Kirsche klickst, verschwindet es.
Ich weiß gerade selber keine andere Möglichkeit, per klick auf einen Button in unterer Ebene ein bestimmtest, nicht explizit deklariertes Tag auf oberer ebene verschwinden zu lassen.
Hmm.

**phpMorpheus2** · 20.11.2008, 10:58

Es gibt funktionen wie prev und next, jedoch finde ich keine z.B. "me" funktion.

Dann könnte man es nämlich so realisieren:

PHP-Code:


$(this).me("tr").hide("fast")

Dann würde nur der übergeordnere tr verschwinden, von anfang bist ende des <tr>-Tag's und somit auch der inhalt.
Jedoch gibt es kein "me" ...

**phpMorpheus2** · 20.11.2008, 11:27

Habe es auch schon mit der parents-Funktion versucht, klappt leider auch nicht nur den übergeordneten bzw. mich einschließenden <tr>-Tag anzusprechen:

PHP-Code:


$(this).parent("tr").hide("fast");

**PHP-Desaster** · 20.11.2008, 11:29

Ich weiß gar nicht, wo das Problem ist. Mit parentNode kommst du doch an den Elternknoten. Nur weil jQuery das nicht hergibt bzw. es keiner findet, darf trotzdem auf natives JS zurückgegriffen werden.

@phpMorpheus2: Ließ doch mal das ganze Thema, bevor du antwortest!

**phpMorpheus2** · 20.11.2008, 11:37

Original geschrieben von PHP-Desaster
Ich weiß gar nicht, wo das Problem ist. Mit parentNode kommst du doch an den Elternknoten. Nur weil jQuery das nicht hergibt bzw. es keiner findet, darf trotzdem auf natives JS zurückgegriffen werden.

@phpMorpheus2: Ließ doch mal das ganze Thema, bevor du antwortest!

Danke für die Funktion.
Er wollte es in jQuery. Also!

**phpMorpheus2** · 20.11.2008, 12:20

Kannst du denn anhand seines Beispieles via parentNode ein Beispiel geben wie er immer die aktuelle <tr> reihe hide'n kann?

PHP-Code:


<body>

    <table>

        <tr>

            <td>1</td>

            <td>Apfel</td>

            <td><b>5</b></td>

            <td><a href="#"><img src="bla.jpg" width="20px" height="20px"></a></td>

        </tr>

        <tr>

            <td>2</td>

            <td>Banane</td>

            <td><b>12</b></td>

            <td><a href="#"><img src="bla.jpg" width="20px" height="20px"></a></td>

        </tr>

        <tr>

            <td>3</td>

            <td>Kirsche</td>

            <td><b>2</b></td>

            <td><a href="#"><img src="bla.jpg" width="20px" height="20px"></a></td>

        </tr>

         <tr>

            <td>4</td>

            <td>Salat</td>

            <td><b>11</b></td>

            <td><a href="#"><img src="bla.jpg" width="20px" height="20px"></a></td>

        </tr>

    </table>

</body>

**PHP-Desaster** · 20.11.2008, 12:32

Wenn du innerhalb der tr bist, ist's ja nicht schwer:

PHP-Code:


var parent=this;

var found=null;

while(parent) {

    if(parent.nodeName.toLowerCase()=='tr') {

        found=parent;

        break;

    }

    parent=parent.parentNode;

}



// found ist jetzt das tr oder null, wenn es kein tr-Elternelement gibt

Ungetestet

**Dennis79** · 20.11.2008, 20:55

N'Abend,

ich hab die Lösung in JQuery dann auch selber gefunden.

D.h. eigentlich hat mir PHP-Desaster den Schlauch auf dem ich stand unter den Füßen weggezogen.
Danke dafür :-)

Der JQuery-Code für mein Beispiel ist folgender:

PHP-Code:


           $("a").click(function() {

                $(this).parent().parent().hide();

           });

Wobei ich beim zweiten parent() sicherheitshalber noch ein "tr" übergeben werde...

[JavaScript] JQuery: bestimmtes Element erwischen