Question

假设我有一个如下列表，<li>内的内容是动态加载的。有没有办法用JQuery检查列表中的所有项目是否为空？

<ul class="clearfix">
   <li data-product-pid="50267857_420" class="productTile">
   </li>
   <li data-product-pid="50265598_100" class="productTile">
   </li>
   <li data-product-pid="50267794_821" class="productTile">
   </li>
   <li data-product-pid="50268227_821" class="productTile">
   </li>
</ul>

Answer 1

尝试使用 empty-selector ，

if($('ul li.productTile').length == $('ul li.productTile:empty').length)    {
    alert('all li are empty')
}

Live Demo

Answer 2

试试这个：

if($('ul li').length==$('ul li').filter(function() {return $(this).text() == '';}).length)    {
  //all are empty
}

Answer 3

var isEmpty = false;
$(ul li).each(function() {
    if($(this).html() == "") {
          isEmpty = true;
    }
});

Answer 4

$('.productTile').each(function(){
   if($(this).text() == ""){
    //do stuff here if empty
  } else {
   // do stuff here if not empty
  }
});

Answer 5

使用新的JS标准版，你有Array.every，但我很确定你不能使用它，所以你必须使用经典的循环方式。下面是一个简单的方法，如果你可以将它转换为jQuery插件会更方便。

function isAllEmpty (yourArr) {
   var isAllEmpty = true;
   $.each(yourArr, function () {
      if ($(this).text() !== '') {
         isAllEmpty = false;
         return false; //breaks loop;
      }
   });

   return isAllEmpty
}

Answer 6

可能这不是必需的，但使用此解决方案，您可以查看所有li标签是否为空或知道这些标签中的哪一个有文本。

<script type="text/javascript">
$(document).ready(function(){
    var len=$('li').length,arr=[]
    for(i=0;i<len;i++){
        var tx= $('li:eq('+i+')').text().length
        if(tx===0){arr.push('e')}else{console.log('Li element nuber '+(i+1)+ ' contains text')}
    }
    if(arr.length===len){console.log('all li are empty')}
})
</script>

如何检查列表中的所有项是否为空

6 个答案: