使用 Jquery 选择未标记的文本答案

【问题标题】：Selecting untagged text with Jquery使用 Jquery 选择未标记的文本
【发布时间】：2012-01-31 00:38:53
【问题描述】：

我有以下 HTML；

<p class="postcontent">
<img src="#">
Some Text
</p>

我希望能够只隐藏文本。到目前为止，我有这个；

  jQuery(function($) {
$(".postcontent").$('[type=text]').hide();
  });

编辑：我对 html 没有任何控制权，所以我需要通过 Jquery 添加它。

【问题讨论】：

到目前为止，您所拥有的并不是一个合理的 jquery。这应该做什么：jQuery(function($)？而且您不能以这种方式链接选择器。
@gdoron: jQuery(function($) {...}); 是 jQuery 的 .ready() 函数的快捷方式。 $ 参数将是对 jQuery 的本地引用。
@amnotiam。 function($){...} 绰绰有余。
@gdoron：不是真的。那只是一个功能。您需要将一个函数传递给 jQuery 函数，以便它在 DOM 准备好时运行。
@amnotiam。对不起。我的意思是$(function(){...})

【解决方案1】：

你可以在 FLY 上换行然后隐藏它：

<p class='postcontent'> <a href=#> dsds </a> aaa </p>

$('.postcontent').contents().filter(function() {
     return this.nodeType == 3; })
             .wrap('<label"> <label />').parent().hide();

根据评论更新：
为什么它会创建两个标签？这很简单，因为它有两个文本节点...：

<p class='postcontent'> (!!FirstTextNode!!)
    <a href=#> dsds </a> (!!SecondTextNode!!) aaa 
</p>

【讨论】：

谢谢！虽然我不明白为什么它会在包装内创建一个空的。
如果节点是文本节点，则 nodeType 属性将返回 3。 (w3schools.com/jsref/prop_node_nodetype.asp) 对于像我这样最初对 this.nodeType == 3 感到困惑的人来说>

【解决方案2】：

据我所知，您不能直接将 CSS 应用于文本节点。

您可能需要将要隐藏的文本包装在一个新元素中，例如div 或span。尝试类似

<p class="postcontent">
<img src="#">
<span class="posttext">
Some text
</span>
</p>

然后

$(".postcontent .posttext").hide();

【讨论】：

【解决方案3】：

您必须将文本包装在另一个元素中，例如 span 或 label 并隐藏它：

HTML

<p class="postcontent">
    <img src="#">
    <label>some Text</label>
</p>

JQuery

$(".postcontent > label").hide();

【讨论】：

【解决方案4】：

如果由于某种原因您无法编辑源 html，则必须使用 .contents 来获取文本节点：

$(".postcontent").contents().each(function(){
    if(this.nodeType == 3){
        $(this).wrap("<div>").parent().hide();
    } 
});

【讨论】：

【解决方案5】：

这将清除示例中的文本。然后，您可以存储文本并在需要时将其重新添加。这是一个分解其工作原理的 jsfiddle：http://jsfiddle.net/brentmn/SXgZc/

var pc = $('.postcontent');
pc.html(pc.html().replace(pc.text().trim(), ''));

【讨论】：

【解决方案6】：

将要隐藏的文本放入元素中，然后调用id隐藏。

【讨论】：