jQuery: nascondere tutto in un contenitore, ad eccezione di un nodo

Question

Ho un contenitore HTML con alcuni contenuti, tra cui testi nodi e altri tag:

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

voglio usare jQuery per nascondere tutto in tale contenitore, tranne il tag di input.

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

Il collegamento "A link" viene rimosso, ma i testi prima e dopo l'input rimangono ancora.

Qual è il modo giusto per nascondere un testo che è figlio diretto di un elemento DOM?

È possibile play with that example on jsfiddle

Answer 1

tuo .hide() non funzionerà sui textnodes, perché uno stile (in questo caso display:none;) deve sempre essere applicato a un tag. Non può essere applicato a un nodo stesso.

Tuttavia, è possibile manipolare il codice HTML con Javascript per aggiungere manualmente campate intorno a questi 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

Poi, se si desidera scoprire i contenuti div in seguito, si può semplicemente rimuovere la classe e lascia le sponde lì (non faranno del male a nessuno).

Answer 2

Spero che non ti sto confondendo. Ho postato la mia vecchia risposta perché ero segnato. Per favore concentrati sulla nuova risposta. Se hai accesso ad aggiungere css qui è la soluzione. Altrimenti, è possibile utilizzare JavaScript e aggiungere questo css; trova la posizione e la dimensione del pulsante modifica il css in base alla posizione e alla dimensione. Quindi aggiungi il css usando jQuery. Nota che ho usato il rosa e il rosso solo per mostrarti cosa sto facendo!

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

La ragione è che non ho il controllo sulla generazione di questo html. E 'generata da un quadro io non sono autorizzato a modificare

provare a impostare #container, #container *:not(#iii)csscolor proprietà 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/

---

Sei autorizzato a modificare l'html tramite javascript?

---

sì potrebbe essere una soluzione

In alternativa, se htmlpuò essere modificate, potrebbero utilizzare .clone() memorizzare elemento originale come oggetto jQuery, compresi tutti html contenuto all'interno dell'elemento . Utilizzare .each() per iterare i nodi figlio dell'elemento originale, se il nodo ha una proprietà "stile" chiamata .hide() sul nodo figlio, altrimenti impostare il nodo #text.nodeValue nella stringa vuota.

Potrebbe ripristinare html di originale utilizzando clone di elemento originale

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