2012-01-08 1 views
0

J'ai des difficultés à trouver un script jQuery qui contiendra tout le contenu d'un div s'il n'y a pas d'éléments de liste non ordonnée présents. Donc, s'il y a des éléments de liste non ordonnés à l'intérieur du div alors le div sera affiché, sinon il sera caché.jQuery pour masquer une DIV si elle n'a pas d'éléments de liste non ordonnée

est ici le code html de base que je dois tester ceci:

<html> 
<title>Experiment Fix Div Hidding</title 
<head> 

<link rel="stylesheet" type="text/css" href="css/css.css" media="all"/> 
<script src="js/jquery-1.7.1.min.js"></script> 
<script type="text/javascript" src="js/scripts.js"></script> 

</head> 

<body> 

<table> 

<tr> 
<td> 
<div id="contenFirst">Sample Content. Not display if not bullets points exists 
<ul> 
<li><a href="#">Hello world</a></li> 
<li><a href="#">Hello world2</a></li></ul></div> 
</td> 
</tr> 

</table> 

</body> 
</html> 

est le script Ici, je suis venu avec semblent à ce jour, mais il n'a pas à faire le travail:

$(document).ready(function(){ 

// hiding a div based on it not having any content (unordered list items) 
if($("#contentFirst").html().length == 0){ 
$("#contentFirst").hide(); 
} 
}); 

Je vais dans le bon sens avec le script jquery, je n'ai pas beaucoup fait avec jquery auparavant.

Toutes les suggestions seront grandement appréciées.

Répondre

3

Essayez ceci:

$(document).ready(function() { 
    $('#contentFirst').hide(); 
    $('#contentFirst').has('ul').show(); 
}); 
+0

Merci Andrew cela a fait l'affaire. Merci à tous pour vos suggestions, toutes utiles. –

1

Cela renverra vrai si votre div n'a pas de listes à puces:

if($("#contentFirst ul").length == 0){ 

Aussi, si vous souhaitez masquer simplement votre div si elle ne dispose pas d'un ul vous pouvez effectuer les opérations suivantes:

$("#contentFirst:not(:has(ul))").hide(); 
2

Tout d'abord, il semble que vous pouvez avoir une faute de frappe :)

<div id="contenFirst">Sample Content. Not display if not bullets points exists 
<ul> 

Il manque un "t" à votre contentFirst.

Deuxièmement, vous voulez compter les éléments de liste <li>, mais l'enfant immédiat de contentFirst est le <ul> qui ne disparaîtra jamais, si contentFirst aura toujours le contenu.

Vous pouvez le faire:

if($("#contentFirst").find("li").length === 0){ 
    $("#contentFirst").hide(); 
} 

find() retournera tous les articles <li> même si elles ne sont pas des enfants immédiats!

Questions connexes