Ankündigung

Einklappen
Keine Ankündigung bisher.

Alternative zu nth-child index() ?

Einklappen

Neue Werbung 2019

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

  • Alternative zu nth-child index() ?

    Hallo,

    ich suche eine Alternative zu child.

    Grund:

    ich muss Textfelder in Zeilen manipulieren die dynamisch nachgeladen werden.

    Mittlerweile vergebe ich jeder Zeile also jedem <tr> ein class="week".

    Um auf den Radio-Button dort zuzugreifen verwende ich Index
    und übergebe diesen an nth-child

    Code:
    $(' :radio').click(function(e){						
    			
    	var tr = $(this).closest('tr'); // zeilen objekt evtl. tr[0]
    	var tr_index = tr.index() + 1; // zeilen index +1
    });
    um auf die Input-felder in dieser Zeile zuzugreifen

    mache ich es genauso

    Code:
    var on=ph;
    $( "#box-"+TypeId+" .week:nth-child("+tr_index+") input[name*='"+on+"']" ).each(function() {});
    Mein Aufbau sieht so ungefähr so aus

    Code:
    <div id="box-1">
    <table>
    <tbody>
    <tr class="week"><td><input type="radio" name="radio"/ val="ph" ></td><td><input tape="text" name="phMin" /></td>... noch 7 weitere Inputs</tr>
    <tr class="week"><td><input type="radio" name="radio"/ val="ph" ></td><td><input tape="text" name="phMin" /></td>... noch 7 weitere Inputs</tr>
    .
    .// hier werden dynamisch immer die gleichen Zeilen nachgeladen
    .
    
    
    <tr><td><button >neue Zeile</button></td></tr>
    </tbody>
    </table>
    Bin nicht sicher ob meine nth-child Methode gut ist um auf die einzlenen Zeilen zuzugreifen

    Was meint ihr, bzw. welche Alternativen gibts dazu?

    Grüße Jürgen

  • #2
    Du musst nur beachten dass nth-child() von 1 beginnt zu zählen (das erste Element ist also index 1)

    Kommentar


    • #3
      Zitat von Spamversender Beitrag anzeigen
      Du musst nur beachten dass nth-child() von 1 beginnt zu zählen (das erste Element ist also index 1)

      Hallo,

      gibt es eine Möglichkeit nth-child bzw. wenn man mit child arbeitet, dafür Sorge zu tragen das nur die ersten Kindelemente also die erste Hierarchie berücksichtigt wird
      ich möchte alle direkten childs und nur die tr-tags des tbody und hier nur in der ersten Ebene

      Beispiel:

      Code:
      <table>
      <tbody>
      <tr><td></td></tr> // tr wäre hier erstes child
      <tr><td></td></tr> // tr wäre hier zweites child
      <tr><td>  // tr wäre hier drittes child
                  <table>
                  <tr><td></td></tr> // tr wäre hier viertes child
                 </table>
      </td></tr>
      <tr><td></td></tr> // tr wäre hier fünftes child
      </tbody>
      </table>
      Ich bin da gerade am rumprobieren.

      wenn ich nur mit childs arbeite und die childs zähle z.B. mit lenght dann zählt er auch die tr-tags mit die verschachtelt sind.

      Und genau das möchte ich vermeiden

      Gibt es da eine saubere Lösung?

      Grüße Jürgen

      Kommentar


      • #4
        Entweder du gibst den in Frage kommenden TRs eine Klasse und machst .class:nth-child(index) oder du gibst der Tabelle eine Klasse und machst .class > tbody > tr:nth-child(index)

        Kommentar


        • #5
          Les dich in "traversing" ein: http://api.jquery.com/category/traversing/
          ungetestet:
          PHP-Code:
          $('input[type="radio"]').click(function(ev){                        
              var 
          $target = $(this).closest('.week').find('input[name="ph"]').first()

              
          console.log($target);
          }); 
          http://learn.jquery.com/
          I like cooking my family and my pets.
          Use commas. Don't be a psycho.
          [URL="http://jscouch.de"]Blog[/URL] - [URL="http://coverflowjs.github.io/coverflow/"]CoverflowJS[/URL]

          Kommentar


          • #6
            Hallo,
            vielen Dank für die Tipps und den Link

            aktuell mache ich es so
            .class:nth-child(index)

            es funktioniert so einwandfrei da ich zuvor den Index der tr's ermittle.

            Bei dieser Methode holt er sich tatsächlich nur die tr-tags der ersten Ebene unter dem Parent.

            zuerst habe ich es mit

            #parent tbody tr :nth-child(childnr)
            probiert
            in dem Moment in dem eine verschachtelte Tabelle in einem tr-tag enthalten war die auch wieder tr's hatte, hat es nicht mehr funktioniert

            da ich jetzt auf den tr's eine Klasse vergebe und den Index mir dann ausgeben lasse, glaube ich zumindest das diese Methode für mein Vorhaben die Sicherer ist.

            Wieso nth-child jedoch mit dem Index besser zurecht kommt ist mir nicht ganz klar, da ich doch annehme das nth-child auch von allen childs ausgeht oder geht da dann der Bezug zu der Klasse?

            sorry für die wohl dumme Frage aber ich habs noch nicht ganz überrissen.

            Grüße Jürgen

            Kommentar


            • #7
              Das parent-tr reicht eigentlich als Bezug, der Umweg über den Index ist deutlich langsamer. Schau dir auch mal $.fn.next und $.fn.eq an.

              Grüße

              Basti
              I like cooking my family and my pets.
              Use commas. Don't be a psycho.
              [URL="http://jscouch.de"]Blog[/URL] - [URL="http://coverflowjs.github.io/coverflow/"]CoverflowJS[/URL]

              Kommentar


              • #8
                Hallo,

                Beim Index so was ich verstanden habe, habe ich die Möglichkeit anzugeben das er nur die in der nächsten Ebene verwendete Klassen zu suchen hat.

                Mit dieser Variante
                Code:
                var tr = $('#box-'+TypeId+' .week').closest('tr'); 
                var tr_index = tr.index() + 1; // da ja mit 0 beginnend
                wenn ich rein über childs gehe habe ich diese Möglichkeit wohl nicht, da kann ich nur das Erste, das Letzte oder eben alle zählen und dann eines auswählen was aber bei mir nicht korrekt funktionierte.

                In meinem Fall hatte ich mir alle childs ausgeben lassen mit lenght, die er auch sauber ermittelt hatte und dann wollte ich immer das Viertletzte ansprechen.
                Sah ich mir den HTML-Code an und zählte die Childs so waren meine Angaben korrekt und auch die Childs die ich mir via lenght ausgeben lies passten.
                Er hätte eigentlich den richtigen <tr> finden müssen.

                Es funktionierte jedoch nicht.

                Wenn man doch genau weiss das immer in der viertletzten Zeile die Zeile ist die man sucht und man zählt alle Childs und vergleicht diese mit der lenght-Ausgabe und das stimmt auch, so ist es doch verwunderlich wieso er dann diese Zeile die man hier möchte nicht findet wenn man von der lenght-Ausgabe 3 abzieht.

                Solange ich keine verschachtelte Tabelle in einen <tr> geladen habe hat es ja sauber funktioniert. Erst als diese Tabelle reingeladen wurde, klappte es nicht mehr obwohl lenght diese <tr> die innerhalb der Tabelle waren auch sauber mitgezählt hatte.

                Das wundert mich schon etwas

                Grüße Jürgen

                Kommentar


                • #9
                  wenn ich rein über childs gehe habe ich diese Möglichkeit wohl nicht, da kann ich nur das Erste, das Letzte oder eben alle zählen und dann eines auswählen was aber bei mir nicht korrekt funktionierte.
                  Äh, ja genau das hab ich mir auch gedacht.. oder so Wenn du da so drauf los plapperst, steckst du viel tiefer in deinem Proejekt drin als das dir einer folgen könnte, was denn eigentlich das Problem darstellt.
                  Schritt zurück, Problem veranschaulichen (jsfiddle.net) und knapp, knackig und präzise beschreiben, dann kann man dir viel besser helfen. Und du lernst dabei auch noch viel mehr.

                  Grüße

                  Basti
                  I like cooking my family and my pets.
                  Use commas. Don't be a psycho.
                  [URL="http://jscouch.de"]Blog[/URL] - [URL="http://coverflowjs.github.io/coverflow/"]CoverflowJS[/URL]

                  Kommentar

                  Lädt...
                  X