[JavaScript] JQuery: bestimmtes Element erwischen

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • [JavaScript] JQuery: bestimmtes Element erwischen

    Hallo,

    ich experimentiere jetzt seit ein paar Wochen mit JQuery.
    Soweit gelingt mir auch alles, aber bei einer Sache stolper ich immer wieder und es vergeht einige Zeit des Ausprobierens ehe ich an's Ziel komme:

    ich klicke etwas an und woanders soll was passieren (z.B. hide() oder show().

    Kann mir das mal jemand erklären?
    Ich versteh's nicht....

    Ein Beispiel.
    Ich hab eine Tabelle mit sagen wir 3 Zeilen und 5 Spalten.

    In jeder vorletzten Spalte hab ich ein verlinktes Image.
    Bei onclick wird eine Funktion aufgerufen, bei "success" der Funktion soll die entsprechende Zeile ausgeblendet werden.

    Das kriege ich ohne "Hilfsmittel" einfach nicht gebacken.
    Ich experimentiere mit prev(), next(), parent() und find() sowie diversen Kombinationen aus allem...

    Nichts bringt mich zum Erfolg.
    Letztlich habe ich es über die ID gelöst, d.h. jedes tr erhält als ID die ID des Datensatzes der in dieser zeile angezeigt wird.

    So klappt's dann mit $("#MeineID").hide(); kinderleicht.
    Aber die Lösung gefällt mir absolut nicht. Es ist auch eher ein "workaround".

    Wäre echt spitze, wenn da mal jemand ein paar Beispiele parat hätte, die mich weiterbringen.

    Viele Grüße,
    Dennis

    Edit: falls das nicht richtig rübergekommen ist: 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...
    Zuletzt geändert von Dennis79; 17.11.2008, 20:03.

  • #2
    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

    Kommentar


    • #3
      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.

      Kommentar


      • #4
        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
        Zuletzt geändert von Dennis79; 18.11.2008, 19:26.

        Kommentar


        • #5
          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

          Kommentar


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

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

            Kommentar


            • #7
              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 !

              Kommentar


              • #8
                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.

                Kommentar


                • #9
                  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" ...

                  Kommentar


                  • #10
                    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"); 

                    Kommentar


                    • #11
                      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!

                      Kommentar


                      • #12
                        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!

                        Kommentar


                        • #13
                          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

                          Kommentar


                          • #14
                            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

                            Kommentar


                            • #15
                              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...

                              Kommentar

                              Lädt...
                              X