jQuery: verstecken alles in einem Behälter, außer einem Knoten

Question

ich einen HTML-Container mit einigen Inhalten, einschließlich Texte Knoten und anderen Tags:

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

Ich möchte jQuery verwenden, um alles in diesem Behälter mit Ausnahme der verstecken Eingabe-Tag

Der Link "Eine Verknüpfung" wird entfernt, aber die Texte vor und nach der Eingabe bleiben erhalten.

Was ist der richtige Weg, um einen Text zu verbergen, der ein direktes Kind eines DOM-Elements ist?

Sie können play with that example on jsfiddle

Answer 1

Ihre .hide() wird auf den textnodes nicht funktionieren, weil ein Stil (in diesem Fall display:none;) immer angewendet werden muss zu einem Tag. Es kann nicht auf einen Knoten selbst angewendet werden.

Allerdings können Sie den HTML-Code mit Javascript manipulieren, um manuell Spannweiten hinzufügen, um diese textnodes:

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

Dann, wenn Sie später die div Inhalt sichtbar machen möchten, können Sie einfach die Klasse entfernen und lass die Spannweiten dort (sie werden niemanden verletzen).

Answer 2

Ich hoffe, ich bin verwirrend Sie nicht. Ich habe meine alte Antwort gepostet, weil ich abgemeldet war. Bitte konzentrieren Sie sich auf die neue Antwort. Wenn Sie Zugriff auf das Hinzufügen von CSS haben, ist dies die Lösung. Andernfalls können Sie JavaScript verwenden und dieses CSS hinzufügen. Der Standort und die Größe der Schaltfläche "Suche" ändern die CSS nach Ort und Dimension. Fügen Sie dann das CSS mit jQuery hinzu. Beachte, dass ich pink und rot benutzt habe, um dir zu zeigen, was ich tue!

$('#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>

Answer 3

Der Grund ist, ich habe keine Kontrolle über die Erzeugung dieses html. Es wird von einem Rahmen generiert wird ich nicht ändern

Versuchen Sie, #container, #container *:not(#iii)csscolor Eigenschaft 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/

autorisierte

Sind Sie berechtigt, den HTML-Code durch Javascript zu ändern?

---

ja es

Alternativ kann eine Lösung

sein könnte, wenn html kann modifiziert werden könnte .clone() nutzen ursprüngliche Element als jQuery-Objekt zu speichern, einschließlich aller html Inhalt innerhalb Element . Verwenden Sie .each(), um untergeordnete Knoten des ursprünglichen Elements zu iterieren, wenn der Knoten die Eigenschaft "style" hat, rufen Sie auf dem untergeordneten Knoten auf, andernfalls setzen Sie #text Knoten .nodeValue auf leere Zeichenfolge.

konnte html original mit Klon des ursprünglichen Elements zurückgesetzt

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