jQuery 获取不带 display="none" 的元素答案

【问题标题】：jQuery get elements without display="none"jQuery 获取不带 display="none" 的元素
【发布时间】：2011-04-23 22:20:56
【问题描述】：

如何获取所有没有此样式属性的tbody > tr：display: none？

【问题讨论】：

标签： jquery attributes coding-style

【解决方案1】：

接受的答案有效，并且非常有用，但在技术上不是 OP 直接要求的。

诚然，我正在分裂头发，但我只需要找到在其style 属性中实际上不包含display: none 的tr 元素，因为父元素可能被隐藏，因此不返回任何元素。

所以我写了以下内容：

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

更新：

原始代码将在没有包含"display: none" 的样式属性的页面上选择全部 trs 的数组。

更有效和更具体的方法是定位表本身。

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>

【讨论】：

这应该是公认的答案。另一种是过滤掉所有可以被父元素隐藏的不可见元素 display:none 样式。

【解决方案2】：

$("tbody > tr:visible")

应该这样做，使用:visible 选择器。

【讨论】：

只知道这将过滤掉所有可以被父元素隐藏的不可见元素 display:none 样式。