没有类时Jquery隐藏类答案

【问题标题】：Jquery Hide Class when no class is present没有类时Jquery隐藏类
【发布时间】：2010-07-13 22:04:01
【问题描述】：

我在下面有一些名为 (16 Courses) 的文本。我只需要隐藏此文本，但无论我尝试使用 jquery 做什么，我似乎都无法隐藏它。有人可以提供任何帮助以便我可以隐藏此文本吗？

<div id="programAttributes">
    <div class="left" id="credits">
       <h3>Credits</h3>
       <h3 class="cost">48</h3>
       (16 Courses)
    </div>
    <div class="gutter12 left">&nbsp;</div>
    <div class="left" id="costPer">
       <h3>Cost Per Credit</h3>     
       <h3 class="cost">$300</h3>                            
    </div>
</div>

我想如果我能写出这样的东西来解决问题，但我到目前为止还没有成功。

$("#credits:not([class!=h3])").hide();

【问题讨论】：

因为它是一个文本节点，你将无法简单地隐藏它。你想让它稍后重新出现吗？或者你想永久摆脱它？解决方案将根据您的需要而有所不同。

标签： javascript jquery html class text

【解决方案1】：

用法

// hides in the whole document
hideText("(16 Courses)");

// only hide inside a specific element
hideText("(16 Courses)", $('#programAttributes'));

// make it visible again
showText("(16 Courses)");

[See it in action]

CSS

.hiddenText { display:none; }

Javascript

// escape by Colin Snover
RegExp.escape = function(text) {
    return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
}

function hideText(term, base) {
  base = base || document.body;
  var re = new RegExp("(" + RegExp.escape(term) + ")", "gi");
  var replacement = "<span class='hiddenText'>" + term + "</span>";
  $("*", base).contents().each( function(i, el) {
    if (el.nodeType === 3) {
      var data = el.data || el.textContent || el.innerText;
      if (data = data.replace(re, replacement)) {
        var wrapper = $("<span>").html(data);
        $(el).before(wrapper.contents()).remove();
      }
    }
  });
}

function showText(term, base) {
  var text = document.createTextNode(term);
  $('span.hiddenText', base).each(function () {
    this.parentNode.replaceChild(text.cloneNode(false), this);
  });
}

【讨论】：

这不是一个好主意，虽然它在显示/隐藏方面很花哨，但它还会破坏整个文档上的 any 事件处理程序等，例如：jsbin.com/uvuno3/3/edit 点击任意<h3> 然后运行函数，它会中断。
+1 - 虽然按照 jQuery 的标准来说有点冗长，但它可以工作。
如果节点包含任何 other 文本，这仍然会中断，需要更多改进才能使用:)

【解决方案2】：

您可以像这样检查和删除文本节点：

$("#credits").contents().filter(function() {
  if(this.nodeType == 3) 
    this.parentNode.removeChild(this);
});

You can test it here，这会获取所有带有.contents() 的节点（包括文本节点），然后循环遍历，如果它是文本节点 (.nodeType == 3)，则将其删除。

【讨论】：

这将完全破坏节点。我认为 OP 最好将文本节点包装在其他元素中，然后隐藏和显示。
@Anurag - 如果 OP 需要再次显示它，是的......但目前这是一个假设。如果是这种情况，您可以轻松地将上面的节点包装在 <span> 等中......但我并没有为 effect OPs 之后的需要做任何复杂的事情。
我刚刚对此进行了测试，它可以在生产中使用。我可以使用 javascript 更新网站模板以隐藏课程信息。目前，我们无法修改编写（16 门课程）类型信息的代码大约 3 周，因为我们计划在下周进行构建，而下一次生产更新要到下个月。不过，到那时，我们将在不再需要隐藏文本的地方进行修复。所以这是一个临时修复。
“如果节点包含任何其他文本，这仍然会中断”？
@galambalazs - 此答案不是尝试删除单个术语，而是删除所有文本节点，处理量要少得多。

【解决方案3】：

你能不能把它包装在一个单独的跨度中，然后做：

$('#credits span').hide();

？

【讨论】：

我已经接受了下面的答案，但不幸的是，我无法在内容正文中编写任何新代码。因此，例如，添加跨度标签是不可能的，否则我会为它编写一个新类并以这种方式隐藏它。谢谢冯老师的支持。

【解决方案4】：

尝试将文本包装在一个跨度中，如下所示：

<div class="left" id="credits">
   <h3>Credits</h3>
   <h3 class="cost">48</h3>
   <span id="toHide">(16 Courses)</span>
</div>

那么你就可以使用jquery了：

$("#credits > span)").hide();

必须将 hide() 函数应用于 DOM 元素。

【讨论】：

【解决方案5】：

我会在文本周围使用一个标签标签，这样我就可以用 jquery 来处理它。

【讨论】：

不要使用<label> 标签，除非它实际上是表单控件的标签。只需使用 <span> 并设置适当的类和/或 id。（假设您可以控制 HTML 源代码）

【解决方案6】：

这是文本节点。遍历所有父节点，如果它的类型是文本节点，则隐藏它。另请参阅：

How do I select text nodes with jQuery?

【讨论】：