javascript - Jquery 计算嵌套列表中的子项，搜索和展开折叠

Question

我正在尝试开发展开折叠、在嵌套列表中搜索和子列表计数，但我不知道如何实现所有这些。

HTML

<div class="searchSection">
  <form action="#" novalidate="novalidate">
    <input type="text" placeholder="search here...">
  </form>
  <ul id="orgCat">
    <li parent-id="" li-id="1">
      <div class="expandBtn"><span id="count"></span>India</div>
      <ul>
        <li parent-id="1" li-id="2">
          <div class="expandBtn"><span id="count"></span>Ap</div>
          <ul>
            <li parent-id="2" li-id="7">
              <div class="expandBtn"><span id="count"></span>vag</div>
            </li>
            <li parent-id="2" li-id="8">
              <div class="expandBtn"><span id="count"></span>tirupati</div>
            </li>
          </ul>
        </li>
        <li parent-id="1" li-id="3">
          <div class="expandBtn"><span id="count"></span>TN</div>
          <ul>
            <li parent-id="3" li-id="9">
              <div class="expandBtn"><span id="count"></span>chena</div>
            </li>
            <li parent-id="3" li-id="10">
              <div class="expandBtn"><span id="count"></span>India1</div>
            </li>
            <li parent-id="3" li-id="11">
              <div class="expandBtn"><span id="count"></span>India2</div>
            </li>
            <li parent-id="3" li-id="12">
              <div class="expandBtn"><span id="count"></span>India3</div>
            </li>
            <li parent-id="3" li-id="13">
              <div class="expandBtn"><span id="count"></span>India4</div>
            </li>
          </ul>
        </li>
        <li parent-id="1" li-id="4">
          <div class="expandBtn"><span id="count"></span>TS</div>
          <ul>
            <li parent-id="4" li-id="5">
              <div class="expandBtn"><span id="count"></span>Hyd</div>
            </li>
            <li parent-id="4" li-id="6">
              <div class="expandBtn"><span id="count"></span>warangal</div>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

当我点击“div”标签时，它应该展开或折叠。 child 的数量应该出现在“跨度”标签中。当我搜索一个元素时，它应该出现在它的根目录中。希望大家理解。

JSFIDDLE

查询

// counting leafs
$('.searchSection').each(function(){
    $('#count').text($('ul').children().length);
})

上面的 jquery 显示了总的“li”元素，但我需要在每个 ul 中显示 li 元素的数量。

我不知道如何实现折叠和展开功能。我是 Jquery 的新手。

Answer 1

此代码应为您提供父级下所有列表项的展开和折叠以及计数。

//Search query    
$("input").keyup(function() {
  var searchTerms = $(this).val();

  $('li').each(function() {
    var $li = $(this);
    var hasMatch = searchTerms.length == 0 || $li.text().toLowerCase().indexOf(searchTerms.toLowerCase()) > 0;

    $li.toggle(hasMatch);
    if ($li.is(":hidden")) {
      $li.closest("ul").show();
    }

  });
});

var $expandBtns = $(".expandBtn");

$expandBtns.each(function() {
  var $span = $(this).find("span#count");
  var $subList = $(this).siblings("ul").find("li")

  $span.text($subList.length)
});

$expandBtns.on("click", function() {
  var $subList = $(this).siblings("ul");

  if ($subList.is(":visible")) {
    $subList.hide();
  } else {
    $subList.show();
  }
})