javascript - jQuery - 获取元素的单个计数

Question

我有发送 ajax 的代码搜索输入框时请求。然后我还想根据某些 <div> 将过滤器发送到我的网络服务器被点击的。片段看起来像这样(没有 ajax 请求)

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

返回的是:每次 .selector 之一s被点击，它log所有的.selector类 .active - 它记录了那个 .selector 的 parent 两个级别(.filter)。

我想弄清楚如何只获取每个 #id 的一个实例过滤器的 即如果temps selectors是active ，它将记录:

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

我只想让它发送一个 - 我想或多或少地获得“唯一值”(使用一些 SQL 术语)

谢谢。

Answer 1

将每个元素推送到一个数组，然后使用 $.unique() 将唯一元素仅记录到控制台:

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>

编辑 从 jQuery 3.0 开始，$.uniqueSort() 是要使用的方法。

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

- jQuery docs

在上面的示例中，包含了 jQuery 2.1.1，因此使用了 $.unique()，因为 $.uniqueSort() 不是函数。