Question

我在表格中有一些TR，其中包含parent_0类。我使用jQuery的map()来获取地图中不是hidden的所有元素。

DOM：

<table id="tableID" class="tableClass">
<tbody>
    <tr>
        <th width="3px">Header1</th>
        <th align="left">Header2</th>
    </tr>
    <tr align="left">
        <td>Data1</td>
        <td><a <i id="1" class="parent_0" ></i>></a>Data12</td>
    </tr>
    <tr align="left" style="display: none;">
        <td>Data2</td>
        <td><a <i id="2" class="parent_0"></i>></a>Data22</td>
    </tr>
</tbody>

jQuery的：

$( document ).ready(function(){ 
    allChildern = $(".parent_0").map(function() {
        return this.id
    }).get();
    alert(allChildern)

    var allSubChildern = $(".parent_0").map(function() {
       if($('#'+this.id).closest('tr').is(':visible')){
           return this.id //its working but taking so much time for 1k records.
       }
    }).get();
    alert(allSubChildern)
});

是否有任何功能可以映射仅可见的元素。

这是Fiddle。谢谢。

Answer 1

您可以使用.filter()获取所有visible行，然后继续使用.map()

将匹配元素集合减少到与选择器匹配的元素或通过函数测试。

var allSubChildern = $(".parent_0").filter(function(){
    return $(this).closest('tr').is(':visible');
}).map(function() {
    return this.id;
}).get();
alert(allSubChildern)

或者，您也可以使用

var allSubChildern = $("#tableID tr:visible .parent_0").map(function() {
    return this.id;
}).get();

Answer 2

如果您真的担心性能并且可以更改html，那么更好的解决方案是使用类来隐藏元素。

即，定义类似.hidden{display: none}的类，然后在tr中使用它来隐藏元素（<tr align="left" class="hidden">而不是<tr align="left" style="display: none;">），这样您就可以使用纯css选择器来选择元素这将提高速度，如

  var allSubChildern = $("#tableID tr:not(.hidden) .parent_0").map(function() {
    return this.id;
  }).get();

使用:visible takes around 55-70毫秒的模型，其中the above在小提琴中仅需1-3毫秒

jQuery：如何映射隐藏的元素

2 个答案: