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

【问题标题】：Hide inline text in div using jQuery使用jQuery隐藏div中的内联文本
【发布时间】：2017-09-27 18:47:07
【问题描述】：

如何在不隐藏h1 元素的情况下隐藏.test 类的div 中的inline 文本？这是我在大型 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>

【问题讨论】：

将其包裹在一个span中并使用jquery hide方法将其隐藏！
你能将文本包装在 HTML 元素中吗？
@Naren Murali 我不能将它包装在一个跨度中，因为这个 html 是给我的。我可以编写一个脚本来将所有内联文本包装在 span 标签中，但我试图不向其中添加其他部分。
和@WizardCoder

标签： javascript jquery html css

【解决方案1】：

您需要将文本换行在另一个元素中，例如 span。

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

还有你的 js：

$(document).ready(function() {
  $('.my-text').hide();
});

如果由于某种原因您无法换行（正如您在 cmets 中提到的那样），您可以使用另一个简单的解决方案：

<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 秒超时以更好地可视化）。

【讨论】：

如果我无法将文本包装在 span 标签中怎么办。这个 html 是使用 swagger 的 codegen 工具生成的，我正在向它添加一些功能。
我已经用其他解决方案和 plunker 编辑了我的答案。

【解决方案2】：

实际上你不能说我想要隐藏整个 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
});

【讨论】：

$("mydiv").children().not("keepthis").hide() 正是这样做的。
您可以选择.hide() 或使用.style('display', 'block')。不确定您正在谈论的选择器

【解决方案3】：

使用 Childern 应该可以工作

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

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

JS Fiddle

【讨论】：

【解决方案4】：

如果您无法在“This is text”字符串周围添加元素，则可以将H1 元素存储在变量中，然后将.text HTML 替换为存储的H1 元素。

$(document).ready(function() {
  var h1 = $('.test').find('h1');
  $('.test').html(h1);
});

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

编辑

如果您想在 DIV 中保留其他未知内容，那么您可以这样做。

$(document).ready(function() {
  var h1 = $('.test').find('*');
  $('.test').html(h1);
});

<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"
  <h2>blah blah blah</h2>
  <p>Random content</p>
  <ul>
   <li>list</li>
   <li>list</li>
  </ul>
</div>

【讨论】：

我还应该补充一点，我不想丢失 div 中的任何内容。
@ChrisBell 抱歉
不用担心。我最初没有指定。我现在已经更新了。
@ChrisBell 在不知道 div 中将包含哪些其他内容的情况下，我看不到这样做的方法。您是否只想隐藏任何未包含在 HTML 元素中的内容？
我需要的是一种在不修改 html 且不丢失内联文本的情况下隐藏内联文本的方法。

【解决方案5】：

您可以使用以下函数将文本包装在一个 span 中，然后执行显示隐藏功能。

$(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】：

如果不换行，则无法隐藏文本。

将它包装在跨度中，然后，您可以使用该跨度

<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 选择器而不是类选择器以获得更好的性能。

你可以通过链接，为什么我建议使用 ID Selector。

In jQuery, is selecting by class or id faster than selecting by some other attribute?

【讨论】：

【解决方案7】：

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

【讨论】：

【解决方案8】：

您不需要将其包装在 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>

【讨论】：