如何隱藏除標籤jQuery以外的標籤內的所有內容？

Question

我有一個<p>標記，我需要隱藏文本。還有<span>裏面的<p>其中我不想隱藏這段文字。這可以做到而不用使用jQuery改變標記？

小提琴：http://jsfiddle.net/ghogdc0x/2/

HTML：

<p class="class"> 
    <span>Text not to hide</span> 
    <br> 
    Text to hide 
</p> 

Answer 1

您可以使用CSS visibility屬性：

$('.class').css('visibility', 'hidden'); 
$('.class').children().css('visibility', 'visible'); 

Here is a working codepen

然後你可以通過做再次使其可見：

$('.class').css('visibility', 'visible'); 

Answer 2

只要你可以複製span元素的p標籤附近，然後隱藏p標籤。試試這個：

$("p").after($("p span")) 
$("p").hide() 

Answer 3

你可以不隱藏文本節點。您只能刪除它們或用另一個元素包裝它們並隱藏該包裝器元素。

以下代碼片段隱藏了非span元素並刪除了文本節點子項。

$('p.class').contents().each(function() { 
    var $this = $(this); 
    if (this.nodeType === 3 && $.trim(this.nodeValue)) { 
     $this.remove(); 
     // in case that you just want to hide the text node 
     // $this.wrap('<i>').parent().hide(); 
    } else if (this.nodeType === 1 && this.tagName !== 'SPAN') { 
     $this.hide(); 
    } 
}); 

http://jsfiddle.net/xxpopvje/

Answer 4

使用此，並嘗試自動換行是隱藏在包裝p元素像

<p><span>Text not to hide</span><br/><p>Text to hide</p></p> 

$('p').find('*').not('span').css('display','none');