jquery each count issue?

Question

I want to label count for each div individually but it is giving full length. In my case I dont want full length i need each divs label count. In order to do this I am using jquery each but it is giving wrong count please somebody help me..

I want + to load if label count is greater than 5. else it should hide. HTML code,

$('.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>

Just FYI your HTML has several mismatched </ul> which can be removed — Rory McCrossan
– Rory McCrossan, Commented Feb 9, 2017 at 10:20
Also your question is unclear. What are you trying to achieve? The counts being alerted seem entirely correct to me given the provided HTML. — Rory McCrossan
– Rory McCrossan, Commented Feb 9, 2017 at 10:21
I want <button class="loadMore" title="Load more">+</button> to load if label count is greater than 5. else it should hide. — Mohan
– Mohan, Commented Feb 9, 2017 at 10:23

Rory McCrossan · Accepted Answer · 2017-02-09 10:27:52Z

To fix this you firstly need to restrict the selector to find only div elements with the .list-group-item class. From there you need to use $(this).find('.loadMore') to get the button within the current set of labels, not to affect all the labels at once. Try this:

$('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);
});

.loadMore, .showLess { display: none; }

<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>

Note that the :gt selector uses the zero-based index of elements, so you would need to use :gt(3) to hide all but the first four elements.

Collectives™ on Stack Overflow

jquery each count issue?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related