children 为空时如何隐藏空 parens

Question

我正在尝试构建一个动态搜索框来过滤列表中的项目 - 该列表设置为一系列无序列表，每个列表都包含多个项目

当用户在搜索框中输入字母时，我只想 return 包含该字母的列表项 letter/letters - 这部分工作正常

但是，我在每个无序列表中都有标题，所以虽然列表中的所有项目都是隐藏的，但标题不是，我想隐藏 heading/whole 无序列表，如果 none children 可见

相反，当更改搜索框时，无序列表应根据需要显示或隐藏。

HTML

<input type="text" id="search-input" name="search-fields">  

<ul class="sorted-list">
<legend>Section 1</legend>
<li class="tmenu"><span class="tmenuspan">bob</span>
<li class="tmenu"><span class="tmenuspan">fred</span>
<li class="tmenu"><span class="tmenuspan">tom</span>
</ul>

<ul class="sorted-list">
<legend>Section 2</legend>
<li class="tmenu"><span class="tmenuspan">mike</span>
<li class="tmenu"><span class="tmenuspan">john</span>
<li class="tmenu"><span class="tmenuspan">david</span>
</ul>

JS

$("#search-input").on("keyup", function () {
    var search = this.value;

    if (search !== '') {

        $('.tmenuspan').each(function() {
            if ($(this).text().toLowerCase().indexOf(search) >= 0) {
                $(this).closest('.tmenu').show();
            } else {
                $(this).closest('.tmenu').hide();
            }
        });

        $('ul.sorted-list').each(function() {
            if($('ul.sorted-list > li').is(':hidden')) {
                //$(this).closest('ul.sorted-list').hide();
            }
        });
    } else {
        $('.tmenu').show();
        $('ul.card-tabs-sorted').show();
    }

});

在上面，当我键入 bob 时，所有的 tmenu 项目都被隐藏了，除了包含 bob 的那个是我需要的，但是第 2 部分 heading/unordered 列表仍然显示 - 这是我无法弄清楚的一点.

https://jsfiddle.net/9Lw675ep/

Answer 1

JS

var $ul = $('.sorted-list');
var $li = $ul.find('li');

$("#search-input").on("keyup", function () {
  var inputValue = $.trim(this.value); // Trim values!
  var rgx = new RegExp(inputValue, "i"); // Case insensitive

  // LI
  $li.show().filter(function() {
    return ! rgx.test($(this).text())
  }).hide();

    // UL
  $ul.show().filter(function() {
    return ! $(this).find("li:visible").length;
  }).hide();
});

https://jsfiddle.net/n62k7hxL/

children 为空时如何隐藏空 parens

How to hide empty parens when children are empty

jquery

hidden