Wählen Sie die nächste "sichtbare" Geschwister aus der aktuellen Zeile

Question

Ein kleiner Selektor mit .next() jquery-Methode macht mich verrückt.

Die Geschichte ist so, ich benutze Bootstrap-Filter mit jquery auf Tabellenzeilen. Wenn der Filter ausführt, ändert sich das Anzeigeformat Attribut table-row, wie folgt aus:

<tr class="activated" style="display: table-row;"> 

Nun, was alles, was ich von JQuery wollen ist, die nächste verfügbare TR wählen, aus dem aktuellen TR, das Display hat = Tischreihe.

Ich habe mit folgendem versucht:

$(getSelectedRow()).next(":not(:hidden)") returns [] 

$(getSelectedRow()).next(":visible") returns[] 

$(getSelectedRow()).next("tr[display==visible]") returns [] 

ich als nächstes verwendet werden soll, weil ich nächste erste Geschwister wollen. Hier

ist die HTML-

<table class="table table-hover navigateable focused" id="bookmarkTable"> 
     <thead> 
      <tr> 
       <th class="text-center">Bookmarks</th> 
      </tr> 
     </thead> 
     <tbody class="searchable" id="bookMarkResultGridView"> 
      <tr class="activated" style="display: none;"> 
       <td class="word-wrap" data-rowindex="0" data-tabid="0" 
       data-url="http://gitready.com/" style="cursor: pointer;">git 
       ready » learn git one commit at a time<br> 
       <small class= 
       "text-muted word-wrap">http://gitready.com/</small></td> 
      </tr> 
      <tr class="activated" style="display: none;"> 
       <td class="word-wrap" data-rowindex="1" data-tabid="0" 
       data-url="http://inthecheesefactory.com/blog/android-design-support-library-codelab/en" 
       style="cursor: pointer;">Codelab for Android Design Support 
       Library used in I/O Rewind Bangkok session :: The Cheese 
       Factory<br> 
       <small class= 
       "text-muted word-wrap">http://inthecheesefactory.com/blog/android-design-support-library-codelab/en</small></td> 
      </tr> 
      <tr class="activated" style="display: none;"> 
       <td class="word-wrap" data-rowindex="2" data-tabid="0" 
       data-url="https://github.com/rogerta/secrets-for-android" 
       style="cursor: pointer;">Store your all Password in Android 
       App<br> 
       <small class= 
       "text-muted word-wrap">https://github.com/rogerta/secrets-for-android</small></td> 
      </tr> 
      <tr class="activated" style="display: table-row;"> 
       <td class="word-wrap" data-rowindex="3" data-tabid="0" 
       data-url="https://guides.codepath.com/android/Google-Play-Style-Tabs-using-TabLayout#design-support-library" 
       style="cursor: pointer;">Google Play Style Tabs using TabLayout 
       | CodePath Android Cliffnotes<br> 
       <small class= 
       "text-muted word-wrap">https://guides.codepath.com/android/Google-Play-Style-Tabs-using-TabLayout#design-support-library</small></td> 
      </tr> 
     </tbody> 
    </table> 

Answer 1

Ich bin nicht sicher, ich verstehe Ihre getSelectedRow(), aber wenn es mit einigen Klassenauswahl getauscht werden kann (in diesem Fall verwendete ich .selected) und Sie würden nur brauchen unmittelbar neben dem Geschwister, die dies Ihre Lösung wäre nicht versteckt:

$(".selected~tr:not(':hidden')").first(); 

https://jsfiddle.net/r3f22uzn/

ich bin nicht sicher, warum dies nicht funktioniert:

$(getSelectedRow()).find("~tr:not(':hidden')").first(); 

aber dies sollte funktionieren:

$(getSelectedRow()).find("~tr:not(':hidden')").each(function(){ 
    // first element 
    $(this).css("background", "black") 
    return false; 
    }); 

https://jsfiddle.net/r3f22uzn/3/