Javascript 使用jQuery隐藏div中的内联文本

如何在类

的
div
中隐藏
内联
文本，而不隐藏
h1
元素？这是我在大型web应用程序中遇到的一个问题的简化示例

其他一些准则是，我不能将文本包装在span标记中，我希望将所有内容保留在div中，这样我就不能简单地删除并添加回我想要的所有内容


$（document）.ready（function（）{}）

你好，世界
“这是文本”
您需要将文本包装到另一个元素中，例如span

<div class="test">
  <h1>Hello World</h1>
  <span class="my-text">"This is text"</span>
</div>

如果由于某种原因无法包装文本（如您在评论中所述），可以使用另一种简单的解决方案：

<div class="test">
  <h1>Hello World</h1>
  This is text
</div>

这是给你的礼物。（为了更好地显示，增加了2秒超时）。
如果不能在“This is text”字符串周围添加元素，则可以将
H1
元素存储在变量中，然后将
.text
HTML替换为存储的
H1
元素


$（文档）.ready（函数（）{
变量h1=$（'.test'）。查找（'h1'）；
$（'.test'）.html（h1）；
});

你好，世界
“这是文本”

用JQuery隐藏


var Elem=$（“.test h1”）；
$（“.test h1”）.remove（）；
var Text=$（“.test”）.Text（）；
$（“.test”）.empty（）.html（Elem）.append（$（“”，{text:text，style:“display:none”}））

你好，世界
“这是文本”
实际上，你不能说我想隐藏整个div，但不能在其中隐藏一个或两个标记。所以你必须隐藏或显示该区域内的所有图像

所以，如果你想显示h1，但隐藏跨度，那么你可以这样做

$(document).ready(function() {
    $('.test').find('h1').style('display', 'block');
    $('.test').find('span').style('display', 'none');
    // add all the tags you want to operate
});

使用Childern应该有效

var child = $('.test').children();
 $('.test').html(child);

//OR
$('.test').html($('.test').children());

您可以使用下面的功能将文本包装在一个范围内，然后执行显示隐藏功能


$（文档）.ready（函数（）{
//下一行仅获取元素内的纯文本
var text=$（'.test'）.clone（）.children（）.remove（）.end（）.text（）；
//下一行获取元素内部的html
var html=$（'.test'）.clone（）.children（）；
//附加html和文本，并在其周围环绕一个span
$（'.test'）.html（html）.append（''+text+''）；
//然后，您可以添加任何CSS，以显示或隐藏内容！
$（“按钮”）。在（“单击”，函数（）上）{
$（'.test>span'）.css（“显示”、“内联”）；
});
});
.test>span{
显示：无；
}

你好，世界
“这是文本”
show
如果不在另一个元素中换行，则无法隐藏文本

将其包裹在跨度中，然后，您可以玩该跨度

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

我建议使用ID选择器而不是类选择器，以获得更好的性能

您可以通过链接，了解我建议使用ID选择器的原因

您不需要用HTML包装它。这应该行得通


$（文档）.ready（函数（）{
$（“.test”）
.contents（）
.filter（函数（）{
返回this.nodeType==3；
}).wrap（“”）；
});
。隐藏{
显示：无；
}

你好，世界
“这是文本”
将其包装在一个范围内，并使用jquery隐藏方法隐藏它！你能用HTML元素包装文本吗？@Naren Murali我不能用span包装它，因为这个HTML是给我的。我可以编写一个脚本，将所有内联文本包装在span标记中，但我尝试不向其中添加其他部分。如果无法将文本包装在span标记中，@WizardCoderWhat。这个html是使用swagger的codegen工具生成的，我正在为它添加一些功能。我已经用其他解决方案和plunker编辑了我的答案。我还应该补充一点，我不想丢失div中的任何内容。@ChrisBell Woops Sorry无需担心。我最初没有具体说明。我现在已经更新了。@ChrisBell在不知道div中将包含哪些其他内容的情况下，我无法找到一种方法。您是否只想隐藏任何未包装在HTML元素中的内容？我需要的是一种隐藏内联文本而不修改HTML且不丢失内联文本的方法。$（“mydiv”）.children（）.not（“keepthis”）.hide（）您可以在
.hide（）
或使用
.style（'display'，'block'）
之间进行选择。不确定您正在谈论的选择器
var child = $('.test').children();
 $('.test').html(child);

//OR
$('.test').html($('.test').children());

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

$(document).ready(function(){
    $('.test-span-class').hide();
    $('#test-span-id').hide();
});