jQuery get elements without display="none"

Question

How can I get all tbody > tr that doesn't have this style attribute: display: none?

Answer 1

The accepted answer works, and is very useful, but not technically what the OP directly asked.

I'm splitting hairs, admittedly, but I needed to find only tr elements which literally did not contain display: none within their style attribute, because the parent element might be hidden, thus returning no elements.

So I wrote the following:

var $trWithoutDisplayNone = $('tbody > tr:not([style*="display: none"])');

---

Update:

The original code will select an array of all trs on a page with no style attribute containing "display: none".

A more efficient and specific way would be to target the table itself.

HTML:

<table id="tableID">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr style="background: grey; display: none;">
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
    </tr>
    <tr>
        <td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>
</table>

JavaScript/jQuery:

<script>
    function getDisplayedRows($targetTable) {
            return $targetTable.find('tr:not([style*="display: none"])');
    }

    $(function() { //shortcut for document ready
        var $table = $("#tableID"), //get table by selector
            $visibleRows = getDisplayedRows($table); //run function to get rows without display: none
    });
</script>

Answer 2

$("tbody > tr:visible")

Should do it, by using the :visible selector.