Question

我无法想出一个jQuery脚本，如果没有无序列表项，则该内容将包含div的所有内容。因此，如果div中存在无序列表项，则将显示div，否则将隐藏它。

这是我必须测试的基本html：

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

这是我到目前为止提出的脚本，但它似乎没有完成这项工作：

$(document).ready(function(){

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

我使用jquery脚本以正确的方式进行，之前没有对jquery做过多少工作。

任何建议都将不胜感激。

Answer 1

试试这个：

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

Answer 2

首先，看起来你可能有一个错字：）

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

您的contentFirst缺少“t”。

其次，您要计算<li>个列表项，但contentFirst的直接子项是<ul>，它永远不会消失，因此contentFirst将永远有内容。

你可以这样做：

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

find()将返回所有<li>项，即使它们不是直接的孩子！

Answer 3

如果您的div没有任何无序列表，则返回true：

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

此外，如果您想隐藏div，如果它没有ul，您可以执行以下操作：

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

如果没有无序列表项，jQuery隐藏DIV

3 个答案: