4lackof 4lackof - 3 months ago 12
CSS Question

jQuery - Get single count of elements

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
.selector
s is clicked, it
log
s all the
.selector
s 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.

Answer

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.