jQuery - Get single count of elements

Question

I have code which sends an ajax request when you search an input box. I then also want to send filters to my web-server based on certain <div>s which were clicked. The snippet looks like this (without the ajax request)

$('.selector').on('click', function(e) {
  $(this).toggleClass('active');
  $('.selector.active').each(function() {
    console.log($(this).parents()[1]);
  });
});

.filter .label {
  padding: 4px 8px;
  background-color: #707070;
}
.filter .content {
  max-width: 96px;
  max-height: 0px;
  margin: 0px 10px 0px 6px;
  background-color: #808080;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
}
.filter:hover .content {
  max-height: 256px;
}
.content .selector {
  background-color: #369;
  padding: 8px 4px;
  text-align: center;
  flex-grow: 1;
  display: inline-block;
  cursor: pointer;
  box-sizing: border-box;
  transition: .1s !important;
}
.content .selector:hover {
  background-color: white;
  color: #369;
}
.content .active {
  background-color: lightgrey;
  color: #369;
}
.content .active:hover {
  background-color: lightgrey;
  color: black;
}
.filter .bar {
  height: 8px;
  width: 100%;
  background-color: #808080;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="temps" class="filter">
  <div class="label">
    <span>The Temps:</span>
  </div>
  <div class="content">
    <div class="selector">Temp1</div>
    <div class="selector">Temp2</div>
  </div>
  <div class="bar"></div>
</div>
<div id="others" class="filter">
  <div class="label">
    <span>The Temps:</span>
  </div>
  <div class="content">
    <div class="selector">Other1</div>
    <div class="selector">Other2</div>
  </div>
  <div class="bar"></div>
</div>

What this returns is: each time one of the .selectors is clicked, it logs all the .selectors which have the class .active - it logs the parents of that .selector two levels up (the .filter).

I am trying to figure out how to get only one instance of each #id of the filter i.e. if both of the temps selectors are active, it will log:

<div id="temps" class="filter">
<div id="temps" class="filter">

I only want to have it send one - I want to get the "unique value" (to use some SQL lingo) more or less

thank you.

Community · Accepted Answer · 2020-06-20 09:12:55Z

3

Push each item to an array, then use $.unique() to log unique items only to the console:

var arr = [];

$('.selector').on('click', function(e) {
  $(this).toggleClass('active');
  $('.selector.active').each(function() {
    arr.push($(this).parents()[1]);
  });

  console.log($.unique(arr));
});

.filter .label {
  padding: 4px 8px;
  background-color: #707070;
}
.filter .content {
  max-width: 96px;
  max-height: 0px;
  margin: 0px 10px 0px 6px;
  background-color: #808080;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
}
.filter:hover .content {
  max-height: 256px;
}
.content .selector {
  background-color: #369;
  padding: 8px 4px;
  text-align: center;
  flex-grow: 1;
  display: inline-block;
  cursor: pointer;
  box-sizing: border-box;
  transition: .1s !important;
}
.content .selector:hover {
  background-color: white;
  color: #369;
}
.content .active {
  background-color: lightgrey;
  color: #369;
}
.content .active:hover {
  background-color: lightgrey;
  color: black;
}
.filter .bar {
  height: 8px;
  width: 100%;
  background-color: #808080;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="temps" class="filter">
  <div class="label">
    <span>The Temps:</span>
  </div>
  <div class="content">
    <div class="selector">Temp1</div>
    <div class="selector">Temp2</div>
  </div>
  <div class="bar"></div>
</div>
<div id="others" class="filter">
  <div class="label">
    <span>The Temps:</span>
  </div>
  <div class="content">
    <div class="selector">Other1</div>
    <div class="selector">Other2</div>
  </div>
  <div class="bar"></div>
</div>

EDIT As of jQuery 3.0, $.uniqueSort() is the method to use.

As of jQuery 3.0, this method is deprecated and just an alias of jQuery.uniqueSort(). Please use that method instead.

- jQuery docs

In the above example, jQuery 2.1.1 is included, so $.unique() is used, as $.uniqueSort() is not a function.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Aug 9, 2016 at 23:09

Nick Bull

9,9567 gold badges39 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

4lackof Over a year ago

thank you! this works. I am going to use .uniqueSort as the jQuery site says unique is deprecated per jQuery 3.0, but thank you for leading me towards this!

Nick Bull Over a year ago

@4lackof Thank you for informing me it's deprecated! I'll edit my answer

4lackof Over a year ago

@guest271314 thank you for your answer. Don't want to start a fight here, but per api.jquery.com/jQuery.unique I quote: "As of jQuery 3.0, this method is deprecated and just an alias of jQuery.uniqueSort(). Please use that method instead."

Soviut · Accepted Answer · 2016-08-09 23:09:37Z

2

You can use the .unique() method built into JQuery.

answered Aug 9, 2016 at 23:09

Soviut

92.2k53 gold badges210 silver badges285 bronze badges

Comments

guest271314 · Accepted Answer · 2016-08-10 01:22:09Z

You could check existing array for element before pushing element to array using $.grep(), .is()

var log = [];

$('.selector').on('click', function(e) {
  $(this).toggleClass('active');
  $('.selector.active').each(function(i, elem) {
    if (!$.grep(log, function(el) {
      return $(el).is($(elem).closest(".filter")[0])
    }).length) {
      log.push($(this).closest(".filter")[0])
    }
  });
  console.log(log);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div id="temps" class="filter">
  <div class="label">
    <span>The Temps:</span>
  </div>
  <div class="content">
    <div class="selector">Temp1</div>
    <div class="selector">Temp2</div>
  </div>
  <div class="bar"></div>
</div>
<div id="others" class="filter">
  <div class="label">
    <span>The Temps:</span>
  </div>
  <div class="content">
    <div class="selector">Other1</div>
    <div class="selector">Other2</div>
  </div>
  <div class="bar"></div>
</div>

You could check existing array for element before pushing element to array using Array.prototype.indexOf()

var log = [];

$('.selector').on('click', function(e) {
  $(this).toggleClass('active');
  $('.selector.active').each(function() {
    if (log.indexOf($(this).closest(".filter")[0]) === -1) {
      log.push($(this).closest(".filter")[0])
    }
  });
  console.log(log);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div id="temps" class="filter">
  <div class="label">
    <span>The Temps:</span>
  </div>
  <div class="content">
    <div class="selector">Temp1</div>
    <div class="selector">Temp2</div>
  </div>
  <div class="bar"></div>
</div>
<div id="others" class="filter">
  <div class="label">
    <span>The Temps:</span>
  </div>
  <div class="content">
    <div class="selector">Other1</div>
    <div class="selector">Other2</div>
  </div>
  <div class="bar"></div>
</div>

@4lackof See updated post. Corrected $.grep(), .is() approach, included .indexOf() approach

Collectives™ on Stack Overflow

jQuery - Get single count of elements

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related