Как скрыть все внутри тега p, кроме span jQuery?

Question

У меня есть тег <p>, который мне нужно, чтобы скрыть текст. Существует <span> внутри <p>, из которых я не хочу скрывать этот текст. Можно ли обойтись без изменения разметки с помощью jQuery?

Fiddle: http://jsfiddle.net/ghogdc0x/2/

HTML:

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

Answer 1

Вы можете использовать свойство видимости CSS:

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

Here is a working codepen

И тогда вы могли бы сделать его видимым, выполнив:

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

Answer 2

Просто вы можете скопировать элемент диапазона вблизи р тега, а затем скрыть р тег. Попробуйте это:

$("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><span>Text not to hide</span><br/><p>Text to hide</p></p> 

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