從克隆元素中移除隱藏元素

在此網頁中隱藏了一些元素。現在，如果我想找到隱藏要素：從克隆元素中移除隱藏元素

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

這將刪除主節點的隱藏要素（其中還改變了頁面的佈局）。我想要做的是複製（克隆）未隱藏的元素。對此我想這一點：

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

但是，這消除了克隆內的所有元素，而不只是隱藏要素（如預期的，因爲它不是在DOM）。從克隆中移除隱藏元素的最佳方式是什麼？

來源

2013-10-07 Devesh Kumar

爲什麼你想克隆身體？ –

我認爲這個問題是，直到你的克隆重新插入到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-07 17:31:14 BYossarian

-3

嘗試使用：

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

來源

2013-10-07 16:41:01

這將刪除像我所說的所有元素 –

這是不正確的，因爲假定在克隆父元素後隱藏了所有元素。 –

正如Peter T.和Devesh Kumar所說的那樣，克隆並不在頁面上呈現，因爲它只是一個克隆，所以它的所有內容在技術上都是「隱藏的」，這就消滅了克隆。 – HoldOffHunger

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-07 16:58:42

它沒有必要，他們有一個隱藏的類。 –

@DeveshKumar但是，添加一個隱藏的類會傷害嗎？您可以在克隆之前將隱藏的類添加到所有隱藏的元素。如果出現問題，請在克隆後立即刪除該類。 –

@DeveshKumar：你有意隱藏一個元素。爲什麼會有人想要設置display：none（inline）屬性，當你可以用css輕鬆做到這一點。 –

我會堅持到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-07 17:08:43

這將假定所有隱藏的元素都是克隆節點的直接子元素。 –

@JamesMontagne多數民衆贊成真的..我真的不知道他試圖選擇什麼類型的元素..他可以選擇他所需要的東西，所以'b = $（'。bla'）。find（'：visible'） .clone（）'; –

downvoter，關心評論。？！ –

有時:visible選擇是不夠的，你會由於display:none;和height:0px;不等同，因此也需要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-19 21:15:34 HoldOffHunger

從克隆元素中移除隱藏元素

回答

相關問題