javascript - 如果具有特定文本的 div 不存在，则显示空数据

Question

我有这样的元素：

<input type="text" onkeyup="filter()" id="filter_data">

<div id="body">
  <div class="child"> Text 1 </div>
  <div class="child"> Text 2 </div>
  <div class="child"> Text 1 </div>
</div>

我想通过输入值搜索 div 文本。

我可以搜索数据，但是.. 如果所有子 div 没有任何数据，如输入值，如何在 div 正文中显示“未找到数据”。

这是我的小提琴。

标签： javascriptjquery

Answer 1

工作小提琴。

您可以添加一个增量变量（result在我的示例中）以了解是否找到任何数据然后show/hide消息：

if( result === 0 ){
    $('.empty_div').removeClass('hide');
}else{
    $('.empty_div').addClass('hide');
}

function filter() {
  var value = $('#filter_data').val();
  var div_class = $('#body').find(".child");
  var result = 0;

  div_class.hide();
  div_class.each(function() {
    if ($(this).text().toUpperCase().indexOf(value.toUpperCase()) != -1) {
      $(this).show();
      result++;
    }
  });

  if (result === 0) {
    $('.empty_div').removeClass('hide');
  } else {
    $('.empty_div').addClass('hide');
  }
}

.hide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" onkeyup="filter()" id="filter_data">
<div id="body">
  <div class="child"> Text 1 </div>
  <div class="child"> Text 2 </div>
  <div class="child"> Text 1 </div>
  <div class="empty_div hide">No Data Found</div>
</div>