jQuery:隐藏容器中的所有内容,但一个节点除外

Question

我有一个包含一些内容的HTML容器,包括文本节点和其他标签:

<div id="container">
    A text outside any tag<br/>
    <input type="button" id="iii" value="xxx"/>
    Another text<br/>
    <a href="#">A link</a>
</div>

我想使用jQuery隐藏除输入标记之外的容器中的所有内容.

// Hide all the node
$("#container").contents().hide();

// First try to hide texts
$("#container").contents().filter(":text").hide();
// Second try
$("#container").contents().filter(function() {
    return this.nodeType === 3;
}).hide();

// Show the desired element
$("#container #iii").show();

删除链接"A链接",但输入前后的文本仍然存在.

隐藏作为DOM元素的直接子元素的文本的正确方法是什么？

你可以在jsfiddle上玩这个例子

Answer 1

您.hide()将无法在文本节点上工作，因为样式（在本例中display:none;）始终需要应用于标签。它不能应用于节点本身。

但是，您可以使用 Javascript 操作 HTML，以在这些文本节点周围手动添加跨度：

// Get all the nodes in the container and loop over them
var allNodes = document.getElementById("container").childNodes;
for (i = 0; i < allNodes.length; i++) {
    var item = allNodes[i];

    if(item.tagName){
        // It already has a proper tag, so just hide it with a class
        $(item).addClass("hidden");
    }else{
        // Add a span around it
        $(item).wrap("<span class='hidden'>");
    }
}

$("#container #iii").removeClass("hidden");

JSFiddle

然后，如果您想稍后取消隐藏 div 内容，您可以简单地删除该类，并将跨度保留在那里（它们不会伤害任何人）。

$("#container .hidden").removeClass("hidden");