Jquery显示更多标签数量?

时间:2017-02-16 07:04:13

标签: javascript jquery html

我想得到div的标签数量,我得到了该div中所有标签的数量。实际上+按钮将显示标签数量是否超过5,否则我使用jquery隐藏该按钮但实际上我想要的是如果标签数量大于5意味着按钮应该与计数一起出现。例如,如果有6个标签,那么就会显示按钮,还有1个它应该显示的是我想要的,请一些身体帮助..



 $('#filter-group21').each(function() {
   var label_count = 1;
   label_count = $(this).find('label').length;
   // alert(label_count);
   $(this).find('label:gt(4)').hide();
   // $(this).find('div:gt(5)').hide();
   // display load more if there are more than 5 filters
   $(this).find(".loadMore").toggle(label_count > 5);

 });

 $('.loadMore').click(function() {
   $(this).next().show();
   $(this).parent().find('label').show();
   // $(this).parent().find('div').show();
 });
 // On click of - button need to show only top 5 filter elements
 $('.showLess').click(function() {
   $(this).hide();
   $(this).parent().find('label').not(':lt(5)').hide();
   // $(this).parent().find('div').not(':lt(5)').hide();
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="filter-group21" class="cf">
  <!--<input type="text" id="dino-search_21" placeholder="Search By FABRIC">  -->
  <label class="checkbox cb_test">
              <input name="filter[]" type="checkbox"  value="144" />
              Chiffon </label>
  <label class="checkbox cb_test">
              <input name="filter[]" type="checkbox"  value="145" />
              Corduroy </label>
  <label class="checkbox cb_test">
              <input name="filter[]" type="checkbox"  value="146" />
              Cotton </label>
  <label class="checkbox cb_test">
              <input name="filter[]" type="checkbox"  value="147" />
              Crepe</label>
  <label class="checkbox cb_test">
              <input name="filter[]" type="checkbox"  value="148" />
              Denim</label>
  <label class="checkbox cb_test">
              <input name="filter[]" type="checkbox"  value="162" />
              Silk</label>
  <button class="loadMore" title="Load more">+</button>
  <button class="showLess" title="Load more">-</button>
  </ul>
</div>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

试试这个

$('#filter-group21').each(function() {
  var label_count = 0,
    limit = 5;
  label_count = $(this).find('label').length - limit;
  $(this).find('label:gt(4)').hide();
  if (label_count > 0) {
    $('.loadMore').append(label_count + 'more')
  }
});

<强> Fiddle Demo

我添加了大约8个标签。所以它会显示+3更多