jquery 检查 div 是否有任何文字

Question

我想用 jQuery 检查 div 中是否有任何文本。如果确实如此，则显示 div 否则将其隐藏。

例如：

<div id="demo_div"></div>

<script>
$( document ).ready(function() {
    if ($("#demo_div") has some text) {

    $("#demo_div").show();
    }
    else
   {
   $("#demo_div").hide();
   }
    });

我应该使用哪个 jQuery 函数来检测 div 中是否有文本？

谢谢！

Answer 1

if ($("#demo_div").is(':empty')) {
   // Whatever you want to do
}

这可能会解决您的问题，但请记住换行符或空格不被视为空。

对于更一般的情况，比如您想删除空格并进行检查。在这种情况下，您可以使用 trim 函数和 html 方法，例如

if (!$.trim($("#demo_div").html()) {
  // Process
}

Answer 2

首先确定div
Trim 它删除任何尾随的白色 space

let showHide = function($selector)
{
  let text = $selector.text().trim();

  if (text.length > 0)
  {
    console.log("showing", $selector.attr("id"));
    $selector.show();
  }
  else
  {
    console.log("hiding", $selector.attr("id"));

    $selector.hide();
  }
}


showHide($("#demo_div") );
showHide($("#demo_div2") );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="demo_div"> 1</div>

<div id="demo_div2"></div>

Answer 3

如果您不想考虑空格，您也可以使用 text() or html() functions in jquery then check if the returned string is longer than zero. You can optionally trim() 结果。

<div id="demo_div"></div>

<script>
$( document ).ready(function() {
   if ($("#demo_div").text().trim().length > 0) {
      $("#demo_div").show();
   }
   else
   {
      $("#demo_div").hide();
   }
});
</script>

顾名思义，text() 检索节点的文本部分，而 html() 检索所有内容，包括 html 标签。您可以根据自己的需要选择。

jquery 检查 div 是否有任何文字

jquery check a div to see if it has any text in it

html

jquery