jQuery addClass example

Change class name on click in jQuery

by Hushme

HTML

<ul class="filter__scroll ">













  <li data-filter="eda3bb5cdbdd8146ff615e97111b40ab-11929" data-remove-href="shoes" data-params="s:2:&quot;[]&quot;;" data-id="6729" data-type="size" data-page-id="11929" id="filter-eda3bb5cdbdd8146ff615e97111b40ab-11929" onclick="e_filter($(this),11929,'features');"
    class="filter__li feature_size">

    <a href="shoes/filter/size-6729" class="filter__this no-reload">IT 36</a>




    <!-- <span class="filter__count"></span> -->

  </li>

















  <li data-filter="eda3bb5cdbdd8146ff615e97111b40ab-11929" data-remove-href="shoes" data-params="s:2:&quot;[]&quot;;" data-id="6669" data-type="size" data-page-id="11929" id="filter-eda3bb5cdbdd8146ff615e97111b40ab-11929" onclick="e_filter($(this),11929,'features');"
    class="filter__li feature_size">

    <a href="shoes/filter/size-6669" class="filter__this no-reload">IT 36</a>




    <!-- <span class="filter__count"></span> -->

  </li>

















  <li data-filter="6d550de2b383176faabd4aeb2752b34d-11929" data-remove-href="shoes" data-params="s:2:&quot;[]&quot;;" data-id="6734" data-type="size" data-page-id="11929" id="filter-6d550de2b383176faabd4aeb2752b34d-11929" onclick="e_filter($(this),11929,'features');"
    class="filter__li feature_size">

    <a href="shoes/filter/size-6734" class="filter__this no-reload">IT 37</a>




    <!-- <span class="filter__count"></span> -->

  </li>

















  <li data-filter="6d550de2b383176faabd4aeb2752b34d-11929" data-remove-href="shoes" data-params="s:2:&quot;[]&quot;;" data-id="6461" data-type="size" data-page-id="11929" id="filter-6d550de2b383176faabd4aeb2752b34d-11929" onclick="e_filter($(this),11929,'features');"
    class="filter__li feature_size">

    <a href="shoes/filter/size-6461" class="filter__this no-reload">IT 37</a>




    <!-- <span class="filter__count"></span> -->

  </li>

















  <li data-filter="6d550de2b383176faabd4aeb2752b34d-11929" data-remove-href="shoes"...

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

JavaScript

$(".filter__scroll li").not('.not').each(function() {
  var a = $(this).find('a').text();
 	var d = new Array;
	var b = $(this).nextAll();
  $(b).each(function(index){
  var c = $(this).find('a').text();
  if (c === a) {
  $(this).addClass('not');
  	var e = $(this).data('id');
    d.push(e)
    
  }
 
  })
	if(d.length > 0 ) {
    for (var i = 0; i < d.length; i++) {
      var c = d[i]
       var d = $(this).find('a').attr('href');
     	console.log(url)
    }
  }
})