JQuery получить элементы без display = "none"

Как я могу получить все tbody > tr, у которых нет этого атрибута стиля: display: none?

Ответ 1

$("tbody > tr:visible")

Должно это сделать, используя селектор :visible.

Ответ 2

Принятый ответ работает и очень полезен, но не технически, о чем прямо спрашивал ОП.

По общему признанию, я расщепляю волосы, но мне нужно было найти только элементы tr которые буквально не содержали display: none в их атрибуте style, потому что родительский элемент мог бы быть скрыт, таким образом, не возвращая никаких элементов.

Поэтому я написал следующее:

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

Обновить:

Исходный код выберет массив всех tr на странице без атрибута стиля, содержащего "display: none".

Более эффективным и конкретным способом было бы настроить таргетинг на саму таблицу.

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>