CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapjquery-selectors
codebased
codebased

Reputation: 7073

Select next "visible" sibling from the current row

A small selector with .next() jquery method is driving me crazy.

The story is like that, I am using Bootstrap filter with jquery on table rows. When the filter executes, it changes the display style attribute to table-row, like this:

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

Now what all I want from Jquery is, select the next available TR, from the current TR, that has display = table-row.

I have tried with the following: 

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

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

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

I want to use next because I want next first sibling.

Here is the 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>

Upvotes: 0

Views: 511

Answers (1)

pegla
pegla

Reputation: 1866

I'm not sure I understand your getSelectedRow() but if it can be swapped with some class selector (in this case i used .selected) and you would need only first next sibling that's not hidden this would be your solution:

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

https://jsfiddle.net/r3f22uzn/

I'm not sure why this isn't working:

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

but this should work:

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

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

Upvotes: 1

Related Questions