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>

当我点击＆＃39; div＆＃39;标记它应该展开或折叠。孩子的数量应该出现在＆span;＆＃39; span＆＃39;标签。当我搜索一个元素时，它应该出现在它的根目录下。我希望你们明白。

JSFIDDLE

Jquery的

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

以上jquery显示总数＆＃39; li＆＃39;元素，但我需要在每个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();
  }
})

Jquery在嵌套列表中计算子项，搜索并展开折叠

1 个答案: