2016-03-31 11 views
0

.next() jquery yöntemiyle küçük bir seçici beni çıldırtıyor.Geçerli satırdan sonraki "görünür" kareyi seç

Öykü şu ki, tablo satırlarında jquery ile Bootstrap filtresi kullanıyorum. = Şimdi

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

, sonraki kullanılabilir TR seçmek ne tüm jQuery istediğiniz, cari TR den, ekran var: filtre işlemi gerçekleştirdiğinde, böyle masa satıra görüntüleme stili özelliğini değiştirir tablo satırı.

aşağıdaki ile denedim:

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

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

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

Ben önümüzdeki ilk kardeş istiyorum, çünkü bir sonraki kullanmak istiyorum. İşte

ben senin getSelectedRow() anladığımdan emin değilim ancak bazı sınıf seçici ile takas olabilir eğer (bu durumda ben .selected kullanılan) 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> 

cevap

1

olduğunu ve sadece gerekir Bu neden çalışmadığını

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

https://jsfiddle.net/r3f22uzn/

emin değilim: Bu çözüm olacaktır gizli değil ilk sonraki kardeş

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

ama bu çalışması gerekir:

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

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

bana sonraki kardeş vermeyecektir
+0

- bunun yerine ben – codebased

+0

sana emin değilim benimle aynı nesneyi döndürebilir jsfiddle işaretliyse, desteklenmediği bir tarayıcı sorunu olabilir, ancak açıkça görebildiğiniz bir şey varsa, ikinci görünür kardeşi seçiyorsunuz. İşte benim tarayıcımda nasıl göründüğünü: http://imgur.com/GXITzJR Ama o seçilmiş sınıfı kullanıyorum, böylece ikinci örnek çalışmayabilir. – pegla

İlgili konular