这是我的html
,
<div id="personaldetails">
<ul>
<li class="clear"></li>
</ul>
<ul>
<li class="clear"></li>
</ul>
</div>
当div中的所有ul内部为空时,我想隐藏div
personaldetails
。
如果ul
包含元素<li class="clear"></li>
,则ul
被视为空。
如何使用Jquery做到这一点?
答案 0 :(得分:2)
你可以试试这个:
$('#personaldetails').find('ul').each(function(){
var txt = $("li", this).text();
if(txt.length <= 0){
$(this).hide();
}
});
if(!$('#personaldetails').find('ul:visible').length){
$('#personaldetails').hide();
}
对我来说,你应该隐藏所有ul
,如果没有可见的ul,那么你可以隐藏#personaldetails
div。
答案 1 :(得分:2)
即使其中一个答案已被接受,我认为它可以很简单:
if($.trim($("#personaldetails").text()) == '') {
$("#personaldetails").hide();
}
:)
答案 2 :(得分:1)
看看那段代码:
function foo(){
var all_li_clear = true;
$("#personaldetails > ul > li").each(function(){
if(!$(this).hasClass("clear")){
all_li_clear = false;
break; // No need to continue now
}
});
if(all_li_clear){
$("#personaldetails").hide();
}
}
你可以看到一个小提琴示例there,只是评论和消除foo();
行。
答案 3 :(得分:1)
Javascript解决方案:
如果所有li都有明确的类
,这只会隐藏div $(function() {
emptyLi = $('#personaldetails ul li').filter(function(){
/*if($(this).hasClass('clear')){
return true;
}else{
return false;
}*/
return $(this).hasClass('clear');
}).length;
if($('#personaldetails ul li').length == emptyLi){
$('#personaldetails').css('display','none');
}
});
CSS:
这将隐藏li类与类清除,所以如果你没有固定ul或li的高度并且没有填充,则给予ul,li的余量当你的所有li元素都有类时,你的div personaldetails会自动隐藏明确
#personaldetails ul li.clear{
display:none;
}
答案 4 :(得分:1)
- <强>已更新强> -
如果您根据清除类决定空类,则可以使用以下代码。
if($("#personaldetails ul li:not(.clear)").length == 0) {
$("#personaldetails").hide();
}
或者,如果您正在寻找 空div ,那么您可以使用 @Samiul Amin Shanto {{3}提供的最短代码}}:
if($.trim($("#personaldetails").text()) == '') {
$("#personaldetails").hide();
}
方法1 :
$("#personaldetails ul li:not(.clear)")
此代码查找没有清除类的所有 li 。然后,如果找不到这样的 li ,只需隐藏 div 。 Like
方法2 :
$("#personaldetails").text()
此代码返回innerHTML文本条带化所有html标记。所以不包含div包含ul,li或其他任何内容的米,这将返回div的纯文本内容,然后条带化我们可以确定div是否为空的任何空格。如果您打算隐藏空div而不隐藏包含空 Ul 的div,那么这应该是您的选择。
答案 5 :(得分:0)
$(function($) {
$cnt = 0;
$('.personalDetails ul li').each(function() {
if($(this).hasClass('clear')) $cnt++;
});
if($('.personalDetails ul li').length == $cnt) $('.personalDetails').hide();
});
答案 6 :(得分:0)
这假设如果你有相同数量的li与班级明确,因为有ul,他们都是空的
var $wrapper = $('#personaldetails');
if( $wrapper.find('ul').length=== $wrapper.find('li.clear').length){
$wrapper .hide();
}
答案 7 :(得分:-2)
$("ul li:empty").closest('div#personaldetails').hide();
答案 8 :(得分:-3)
#personaldetails ul li.clear{
visibility:hidden;
}