如何在不隐藏inline元素的情况下隐藏div班.test内的h1文字？这是我在更大的Web应用程序中遇到的问题的简化示例。
其他一些指导原则是我无法在span标记中包装文本，并且我希望将所有内容保留在div中，这样我就可以简单地删除并添加我想要的所有内容。
$(document).ready(function() {});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">
<h1>Hello World</h1>
"This is text"
</div>
答案 0 :(得分：3)
您需要将文本换行到另一个元素中，例如span。
<div class="test">
<h1>Hello World</h1>
<span class="my-text">"This is text"</span>
</div>
你的js：
$(document).ready(function() {
$('.my-text').hide();
});
如果由于某种原因你无法包装文本（正如你在评论中提到的那样），你可以使用另一个简单的解决方案：
<div class="test">
<h1>Hello World</h1>
This is text
</div>
和js：
$(document).ready(function() {
var h1elem = $('h1'); //cache element which should not be removed
$('.test').empty(); //clear container .test
$('.test').append(h1elem); // append cached element back
});
以下是plunker。 （为了更好的可视化，添加了2秒超时）。
答案 1 :(得分：0)
如果你不能在＆＃34周围添加元素;这是文字＆＃34;然后，您可以将Required.DisallowNull元素存储在变量中，然后将H1 HTML替换为存储的.text元素。
H1$(document).ready(function() {
var h1 = $('.test').find('h1');
$('.test').html(h1);
});
修改
看到你想在DIV中保留其他未知内容，那么你就会这样做。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">
<h1>Hello World</h1>
"This is text"
</div>$(document).ready(function() {
var h1 = $('.test').find('*');
$('.test').html(h1);
});
答案 2 :(得分：0)
隐藏在JQuery
var Elem= $(".test h1");
$(".test h1").remove();
var Text=$(".test").text();
$(".test").empty().html(Elem).append($("<span/>",{text:Text,style:"display:none"}));<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">
<h1>Hello World</h1>
"This is text"
</div>
隐藏CSS
.test{font-size:0; }
.test h1{font-size:35px; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">
<h1>Hello World</h1>
"This is text"
</div>
答案 3 :(得分：0)
实际上你不能说我想要整个div而不是一个或两个标签。所以你必须隐藏或显示该区域内的所有内容
所以如果你想显示h1但隐藏span，那么你可以这样做
$(document).ready(function() {
$('.test').find('h1').style('display', 'block');
$('.test').find('span').style('display', 'none');
// add all the tags you want to operate
});
答案 4 :(得分：0)
使用Childern应该工作
var child = $('.test').children();
$('.test').html(child);
//OR
$('.test').html($('.test').children());
答案 5 :(得分：0)
您可以使用以下函数将文本包装在范围中，然后执行show hide功能。
$(document).ready(function() {
//the below line fetches only the plain text inside the element
var text = $('.test').clone().children().remove().end().text();
//the below line fetches the html inside the element
var html = $('.test').clone().children();
//append the html and the text with a span wrapped around it
$('.test').html(html).append('<span>' + text + '</span>');
//you can then add any CSS you want to show hide the contents!
$('button').on("click", function() {
$('.test > span').css("display", "inline");
});
});.test>span {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">
<h1>Hello World</h1>
"This is text"
</div>
<button>show</button>
答案 6 :(得分：0)
您无法隐藏文本而不会包含在其他元素中。
将其包裹在跨度中，之后，您可以使用该跨度
<div class='test'>
<h1>Hello World</h1>
<span id='test-span-id'>This is Text</span>
<span class='test-span-class'>This is Text</span>
</div>
这是你的JS文件
$(document).ready(function(){
$('.test-span-class').hide();
$('#test-span-id').hide();
});
我建议使用ID Selector而不是类Selector来获得更好的性能。
您可以查看链接，为什么我建议使用ID选择器。
In jQuery, is selecting by class or id faster than selecting by some other attribute?
答案 7 :(得分：0)
您不需要将其包装在HTML中。这应该有用。
$(document).ready(function() {
$('.test')
.contents()
.filter(function() {
return this.nodeType === 3;
}).wrap( '<div class="hidden"></div>' );
});.hidden{
display:none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">
<h1>Hello World</h1>
"This is text"
</div>