JQuery get elements without display = "none"

Question

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

Answer 1

 $("tbody > tr:visible") 

Should do this using the :visible selector.

Answer 2

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

Admittedly, I split the hair, but I only needed to find tr elements that literally did not contain display: none in their style attribute, because the parent element could be hidden, thus not returning any elements.

So I wrote the following:

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

---

Update:

The source code will select an array of all tr on the page without a style attribute containing "display: none" .

A more efficient and concrete 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"])'); } var $table = $("#tableID"), $visibleRows = getDisplayedRows($table); </script>