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");

Answer 2

原因是我无法控制这个html的生成。 它是由我无权修改的框架生成的

尝试将#container #container *:not(#iii) ， #container *:not(#iii) css color属性设置为transparent

 $("#container, #container *:not(#iii)").css("color", "transparent") 

 #container { border: 1px solid red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <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> 

jsfiddle https://jsfiddle.net/h7yuq8b6/10/

---

您是否有权通过javascript修改html？

---

是的，它可能是一个解决方案

或者，如果可以修改html ，可以利用.clone()将原始元素存储为jQuery对象，包括元素中的所有html内容。 使用.each()来遍历原始元素的子节点，如果节点有“风格”属性调用.hide()子节点上，否则设置#text节点.nodeValue空字符串。

可以使用原始元素的克隆将html重置为原始

 // save orginal `html` var clone = $("#container").clone(); $("#container").contents().filter(function() { return this.nodeType === 3 || this.id !== "iii" }).each(function() { if ("style" in this) { $(this).hide() } else { this.nodeValue = "" } }) 

 #container { border: 1px solid red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <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> 

Answer 3

我希望我不要混淆你。 我发布了我的旧答案，因为我被标记了下来。 请关注新答案。 如果你有权在这里添加css，那就是解决方案。 否则，您可以使用JavaScript并添加此CSS; 查找按钮的位置和尺寸根据位置和尺寸修改css。 然后使用jQuery添加css。 请注意，我使用粉红色和红色只是为了告诉你我在做什么！

 $('#container :not(label)').hide(); 

 #container2 { border: 1px solid red; position: relative; } #container2:before{ content: '\\0020'; width: 142px; height: 17.5px; position: absolute; top:0px; left: 0px; background: pink; } #container2:after{ content: '\\0020'; width: 315px; height: 17.5px; position: absolute; top: 20px; left: 40px; background: red; z-index: 99; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- This is my old answer --> <div id="container2"> <label>A text outside any tag</label><br/> <input type="button" id="iii" value="xxx"/> <label>Another text</label><br/> <a href="#">A link</a> </div> <!-- This is the new answer --> <br/><br/> <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>