jquery每个计数问题?

时间:2017-02-09 10:18:03

标签: jquery html

我想单独标记每个div的计数,但是它给出了全长。在我的情况下,我不想要全长我需要每个div标签计数。为了做到这一点,我每个人都使用jquery,但它给出了错误的数量,请有人帮助我..

如果标签数量大于5,我想加载+否则它应该隐藏。 HTML代码,

$('.list-group-item').each(function() {
  var label_count = 0;
  label_count = $(this).find('label').length;
  alert(label_count);
  // alert(label_count);
  $(this).find('label:gt(4)').hide();
  // count++;
  if (label_count > 4) {
    //alert(count);
    $(".loadMore").show();
  }
  // else
  // {
  //    $(".loadMore").show();
  // }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list-group cat_fltr">

  <a class="list-group-item fltrHdng">Size</a> 
  <div class="list-group-item">
    <div id="filter-group10" class="cf">
      <!--<input type="text" id="dino-search_10" placeholder="Search By Size">  -->
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="59" />S
      </label>
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="60" />M
      </label>
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="61" />L
      </label>
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="62" />XL
      </label>
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="63" />XXL
      </label>
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="143" />XS
      </label>
      <button class="loadMore" title="Load more">+</button>
      <button class="showLess" title="Load more">-</button>
    </div>
  </div>

  <a class="list-group-item fltrHdng">FABRIC</a> 
  <div class="list-group-item">
    <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>
      <button class="loadMore" title="Load more">+</button>
      <button class="showLess" title="Load more">-</button>
    </div>
  </div>

  <a class="list-group-item fltrHdng">Brands</a> 
  <div class="list-group-item">
    <div id="filter-group22" class="cf">
      <!--<input type="text" id="dino-search_22" placeholder="Search By Brands">  -->
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="149" />Go Colors</label>
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="150" />Comfort Lady</label>
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="151" />Morrio
      </label>
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="152" />Twin Birds</label>
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="153" />Fashion For U (FFU)</label>
      <button class="loadMore" title="Load more">+</button>
      <button class="showLess" title="Load more">-</button>
    </div>
  </div>

  <a class="list-group-item fltrHdng">Style</a> 
  <div class="list-group-item">
    <div id="filter-group12" class="cf">
      <!--<input type="text" id="dino-search_12" placeholder="Search By Style">  -->
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="154" />Casual
      </label>
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="155" />Ethnic
      </label>
      <button class="loadMore" title="Load more">+</button>
      <button class="showLess" title="Load more">-</button>
    </div>
  </div>

  <a class="list-group-item fltrHdng">Length</a> 
  <div class="list-group-item">
    <div id="filter-group17" class="cf">
      <!--<input type="text" id="dino-search_17" placeholder="Search By Length">  -->
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="114" />Full
      </label>
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="117" />Ankle
      </label>
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="156" />3/4
      </label>
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="157" />Capri
      </label>
      <button class="loadMore" title="Load more">+</button>
      <button class="showLess" title="Load more">-</button>
    </div>
  </div>
</div>

1 个答案:

答案 0 :(得分:3)

要解决此问题,首先需要限制选择器仅查找div类的.list-group-item元素。从那里你需要使用$(this).find('.loadMore')来获取当前标签集中的按钮,而不是一次影响所有标签。试试这个:

&#13;
&#13;
$('div.list-group-item').each(function() {
  var $group = $(this);
  var label_count = $group.find('label').length;
  $group.find('label:gt(3)').hide();
  $group.find(".loadMore").toggle(label_count > 4);
});
&#13;
.loadMore, .showLess { display: none; }
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list-group cat_fltr">

  <a class="list-group-item fltrHdng">Size</a> 
  <div class="list-group-item">
    <div id="filter-group10" class="cf">
      <!--<input type="text" id="dino-search_10" placeholder="Search By Size">  -->
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="59" />S
      </label>
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="60" />M
      </label>
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="61" />L
      </label>
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="62" />XL
      </label>
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="63" />XXL
      </label>
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="143" />XS
      </label>
      <button class="loadMore" title="Load more">+</button>
      <button class="showLess" title="Load more">-</button>
    </div>
  </div>

  <a class="list-group-item fltrHdng">FABRIC</a> 
  <div class="list-group-item">
    <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>
      <button class="loadMore" title="Load more">+</button>
      <button class="showLess" title="Load more">-</button>
    </div>
  </div>

  <a class="list-group-item fltrHdng">Brands</a> 
  <div class="list-group-item">
    <div id="filter-group22" class="cf">
      <!--<input type="text" id="dino-search_22" placeholder="Search By Brands">  -->
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="149" />Go Colors</label>
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="150" />Comfort Lady</label>
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="151" />Morrio
      </label>
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="152" />Twin Birds</label>
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="153" />Fashion For U (FFU)</label>
      <button class="loadMore" title="Load more">+</button>
      <button class="showLess" title="Load more">-</button>
    </div>
  </div>

  <a class="list-group-item fltrHdng">Style</a> 
  <div class="list-group-item">
    <div id="filter-group12" class="cf">
      <!--<input type="text" id="dino-search_12" placeholder="Search By Style">  -->
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="154" />Casual
      </label>
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="155" />Ethnic
      </label>
      <button class="loadMore" title="Load more">+</button>
      <button class="showLess" title="Load more">-</button>
    </div>
  </div>

  <a class="list-group-item fltrHdng">Length</a> 
  <div class="list-group-item">
    <div id="filter-group17" class="cf">
      <!--<input type="text" id="dino-search_17" placeholder="Search By Length">  -->
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="114" />Full
      </label>
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="117" />Ankle
      </label>
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="156" />3/4
      </label>
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="157" />Capri
      </label>
      <button class="loadMore" title="Load more">+</button>
      <button class="showLess" title="Load more">-</button>
    </div>
  </div>
</div>
&#13;
&#13;
&#13;

请注意,:gt选择器使用从零开始的元素索引,因此您需要使用:gt(3)来隐藏除前四个元素之外的所有元素。