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

链接＆＃34;链接＆＃34;被删除，但输入之前和之后的文本仍然存在。

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

你可以play with that example on 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) css color属性设为transparent

＆＃13;

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

＆＃13;

#container {
    border: 1px solid red;
}

＆＃13;

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

＆＃13;

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

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

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

或者，如果{/ 1}} 可以进行修改，可以利用html将原始元素存储为jQuery对象，包括元素中的所有.clone()内容。如果节点具有＆＃34;样式＆＃34;则使用html来迭代原始元素的子节点。子节点上的属性调用.each()，否则将.hide()节点#text设置为空字符串。

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

＆＃13;

html

＆＃13;

// 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 = ""
  }
})

＆＃13;

#container {
    border: 1px solid red;
}

＆＃13;

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>

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

3 个答案: