Question

此网页中隐藏了一些元素。现在，如果我想找到隐藏的元素：

var node =  jQuery('body')[0];
$(node).find(":hidden").remove();

这将从主节点中删除隐藏的元素（这会进一步改变页面的布局）。我想要做的是复制（克隆）未隐藏的元素。我正在尝试这个：

var clone = node.cloneNode(true);
$(clone).find(":hidden").remove();

但这会删除克隆中的所有元素，而不仅仅是隐藏的元素（正如预期的那样，因为它不在dom中）。从克隆中删除隐藏元素的最佳方法是什么。

Answer 1

我认为问题在于，在将克隆重新插入DOM之前，所有这些都被视为隐藏。

也许您可以首先标记要删除的隐藏元素，然后克隆然后删除标记的元素：

var $node = ... ; // jQuery object of node to be cloned
$node.find(':hidden').addClass('markedForRemoval');

var $clone = $node.clone();

$clone.find('.markedForRemoval').remove();

// tidy up:
$clone.find('.markedForRemoval').removeClass('markedForRemoval');
$node.find('.markedForRemoval').removeClass('markedForRemoval');

演示：http://jsfiddle.net/BYossarian/6ysq8/

Answer 2

var clone = node.cloneNode(true);
var hiddenElements = clone.querySelectorAll('.hidden'); // if hidden elements are applied the css class hidden

for(var i = 0; i < hiddenElements.length; i++){
    clone.removeChild(hiddenElements[i])
}

如果没有隐藏类，则遍历所有子元素并检查display属性。

var children = clone.childNodes;
for(var i = 0; i < children.length; i++){
   if(children[i].style && children[i].style.display == 'none'){
       clone.removeChild(children[i]);
   }
}

Answer 3

我会坚持使用jQuery clone。我的方法有点粗糙，但它有效。

<div class="bla" > 
    <span class="hidden">hidden</span>
    <span class="hidden">hidden</span>
    <span class="hidden">hidden</span>
    <span > visible </span>
</div>

首先，克隆父母。

var a = $('.bla').clone()

然后克隆可见的孩子。

var b = $('.bla > :visible').clone() ;

然后将它们相互添加。

a.html(b)

整件事情都是如此：

var a = $('.bla').clone()
var b = $('.bla > :visible').clone() ; 
a.html(b)

以下是一个示例：http://jsfiddle.net/4Dky9/1/

Answer 4

有时候:visible选择器是不够的，并且您还需要一个height:0px样式的选择器，因为display:none;和height:0px;不相等。

在克隆之前，我们需要将元素标记为可见或不可见，因为克隆后，克隆位于变量中，但不在页面上，因此其中的所有内容都符合:hidden的条件。（加分：让我们尽可能高效，不要劫持类或id字段，而是使用自定义数据属性。）

识别真正隐藏的元素：

$(node).find(':hidden').attr('data-hidden', 'true');
$(node).find('
      *[style*="height:0px"],
      *[style*="height: 0px"]
').attr('data-hidden', 'true');

深度克隆节点：

var clone = node.clone(true, true);

删除隐藏的元素：

clone.find('*[data-hidden="true"]').remove();

Answer 5

尝试使用：

$(clone).children(':hidden').remove();

从克隆元素中删除隐藏的元素

5 个答案: