Question

我有一个包含以下<div>的JSP：

<div class="articleInfo" data-url="${article.url}/infoSheet"></div>

如果该文章有任何可用数据，那么它将填充在<div>内，如下所示：

<div class="articleInfo" data-url="${article.url}/infoSheet">
     <div class="data">This is data</div>
</div>

如果没有可用数据，则<div>保持不变。

如果“articleInfo”div有任何子节点，我尝试用jQuery检查，但它没有，即使我将检查放在最后加载的javascript文件的$(document).ready(function () {}的末尾。我想这是由于数据如何加载data-url的{{1}}属性。

如何检查是否已填充任何数据？

Answer 1

您可以is()使用:empty

$(function(){
    // assuming there is single element having class articleInfo
    alert($('.articleInfo').is(':empty'));
});

如果您的articleInfo div是异步填充的，那么您需要在ajax回调中检查其数据，例如，

$.ajax({
   url:....
   data:...
   success:function(data){
       if(!data){
          // this div url has no data
       }
   }
});

Answer 2

好吧，我想你对这个ajax下载人员没有回调，而且这个操作没有留下任何像数据属性那样做ajax的迹象。如果是这样 - 在DOM中没有回调和符号，那么我的主张是 setInterval 并且在那里检查div是否有数据：

var checkedCount=0;
var maxCheckCount=5;//we check 5 times
var checkInterval=setInterval(function(){

  var $divs=$('div[data-url]');

   $divs.each(function(index){

       if ( $(this).find("div.data") ){

           //our div has data
       }else{

           //our div has no data ( maybe will be downloaded? )

       }
   });

   checkedCount++;

   if (checkedCount==maxCheckCount)
   clearInterval(checkInterval);

},1000); //check every 1 sec

所以我们检查5次，每1秒检查一次（根据您的需要进行定制）。这不是完美的解决方案，如果ajax很长，那么它将在ajax结束之前停止工作。

您还可以观看DOM中的更改：

$('div[data-url]').bind('DOMSubtreeModified', function(e) {

     if ($(this).find("div.data")){

         //div has data
     }else{

        //div has no data but in this situation this never calls
     }


});

检查是否已使用data-url异步加载<div>

2 个答案: