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时，log所有.selector s都有.active个 - 它会记录.selector两个等级的父母（.filter）。

我正在尝试弄清楚如何仅获取过滤器的每个#id的一个实例，即如果两个temps selectors都是active，它会记录：

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

我只想让它发送一个 - 我想或多或少地获得“独特价值”（使用一些SQL术语）

谢谢你。

Answer 1

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

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

从jQuery 3.0开始，不推荐使用此方法，只是jQuery.uniqueSort（）的别名。请改用该方法。

- jQuery docs

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

Answer 2

您可以使用JQuery内置的.unique()方法。

Answer 3

在使用$.grep()，.is()

将元素推送到数组之前，您可以检查元素的现有数组

＆＃13;

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);
});

＆＃13;

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

＆＃13;

在使用Array.prototype.indexOf()

将元素推送到数组之前，您可以检查元素的现有数组

＆＃13;

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);
});

＆＃13;

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

＆＃13;

jQuery - 获取单个元素数

3 个答案: