2

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

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

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

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

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

4

5 回答 5

6

我认为问题在于，在您的克隆重新插入 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/

于 2013-10-07T17:31:14.623 回答
0 
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])
}

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

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]);
   }
}
于 2013-10-07T16:58:42.657 回答
0

我会坚持使用 jQuery 克隆。我的方法有点粗糙，但很有效。

<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/

于 2013-10-07T17:08:43.997 回答
0

有时: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();
于 2017-09-19T21:15:34.100 回答
-3

尝试使用：

$(clone).children(':hidden').remove();
于 2013-10-07T16:41:01.977 回答