Question

我有此代码，它可以工作：

$(document).ready(function() {
   $('#textDiv:empty').hide();
});

但是我想添加一个jquery函数，以防div #textDiv不为空。如果它不为空，我想添加一个警报。我没有成功尝试过此代码。

$(document).ready(function(){
    if ( $('#textDiv').text().length == 0 ){
        alert ("please add players below");
    }
});

最干净的方法是什么？

Answer 1

.text（）方法的结果是一个字符串，其中包含所有匹配元素的组合文本。它不同于.html（）函数。由于不同浏览器中HTML解析器的不同，返回的文本可能在换行符和其他空格中有所不同。

最好创建一个函数来检查div是否具有html并分别返回true或false。

 (function($){
        jQuery.fn.checkEmpty = function() {
           return !$.trim(this.html()).length;
        };
    }(jQuery));

使用：

<div id="selector"></div>

准备好文档后，用div调用此函数，它将根据情况发出警报。

$(document).ready(function(){
  if($("#selector").checkEmpty()){
         alert("Empty");
    }else{
         alert("Not Empty");
    }
});

Answer 2

您需要使用text() text函数在div中获取html / text

$(document).ready(function(){
  if ($('#textDiv').text() == '') // Change the condition for emapty and not empty
  {
    alert ("please add players below");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="textDiv"></div>

Answer 3

您可以使用CSS Pseudo-Classes访问jQuery中的项目：

if ($('.textDiv:empty')) {
  alert('First Empty');
}

if ($('.textDiv:not(:empty)')) {
  alert ("Second not Empty\nplease add players below");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="textDiv">Empty : No child elements</div>
<br>
<div class="textDiv">
  <p>Not Empty : Has child elements</p>
</div>

Answer 4

在length之前提醒hide，否则发出警告。

if ($('#textDiv:empty').length !== 0)
  $('#textDiv:empty').hide();
else
 alert ("please add players below");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="textDiv">Test Contain For Alert</div>

Answer 5

也许是这样的：

$(document).ready(function(){
   if (!$('#textDiv').text().length){
    alert ("please add players below");
   }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div id="textDiv"></div>

如果div为空，则添加警报

5 个答案: