Question

我有一个问题，起初看起来像一个完全没脑子和简单的任务。

我的页面上有一个JavaScript插件，可以在Wordpress页面的侧边栏中生成一个目录列表。我的目的是在其中的列表没有元素时隐藏#toc的文本小部件元素。我试图用jQuery解决它，但没有运气。

HTML：

<div class="textwidget">
   <div id="toc">
     <ul></ul>
   </div>
 </div>

JavaScript：

jQuery(document).ready(function ($) {

    if (!$('#toc').children('ul').has('li')) {
        $('#toc').parent().hide();
    }

});

我的脚本应隐藏此特定#toc的父级，因为它没有子级<li>元素，但它没有。相反，当我从if语句中删除！时，脚本会隐藏我的列表，就好像它有一些内容一样。然后它还隐藏了实际上包含元素的列表。我在这里完全错过了什么吗？

Answer 1

只需使用：

$(document).ready(function () {
    if ($('#toc ul li').length < 1) {
        $('#toc').parent().hide();
    }
});

Answer 2

<script>
$(document).ready(function(){
$("#YourListID").hide();
var a = $("#YourListID li").length();
if (a  > 0 ) {
    $("#YourListID").show();
}
else {
    $("#YourListID").hide();
    }
});
</script>

Answer 3

您可以尝试以下方法之一：

1）给UL一个ID并检查它的HTML。例如：

var ulHtml = $("#myULElement").html();
if(ulHtml == ''){
    $('#toc').parent.hide();
}

2）执行与上述相同但使用相对路径，如：

var ulHtml = $("#toc ul").html();
//etc...

看看是否有效。如果确实如此，我们可以进一步详细说明。

Answer 4

这有效：

if(!$('#toc').has('ul li').length) {
    $('#toc').closest('.textwidget').hide();
}

工作jsfiddle here

Answer 5

您需要做的是将.length添加到测试声明中。

jQuery（document）.ready（function（$）{

if (!$('#toc').children('ul').has('li').length) {
    $('#toc').parent().hide();
}

}）;

Working Fiddle

来源：http://api.jquery.com/has/

Answer 6

使用长度来评估是否有<li>。

<强> DEMO

<div class="textwidget">
   <div id="toc">
       <ul></ul>
   </div>
 </div>

if ($('#toc ul li').length<1) {
        $('#toc').parent().hide();
    }

Answer 7

在$（文件）内。已经检查了这个

if($.trim($('#toc ul').html()).length == 0){
$('#toc').parent().hide();
}

视情况而定

<ul></ul>


 <ul>

   </ul>

当没有元素时隐藏无序列表

7 个答案: