jquery。获取不重复的自定义属性数组

Question

我有以下选择器：

$('.photo-box[data="images100"] .photo div')

它 return 值数组：

[<div class="close-image" imageid="11" terminalid="100"></div>, 
 <div class="close-image" imageid="10" terminalid="100"></div>, 
 <div class="close-image" imageid="12" terminalid="100"></div>, 
 <div class="close-image" imageid="11" terminalid="100"></div>, 
 <div class="close-image" imageid="10" terminalid="100"></div>, 
 <div class="close-image" imageid="12" terminalid="100"></div>]

我想得到所有不同的 imageid 值而不重复的数组。

我怎样才能做到？

P.S.

在我的例子中应该是

["10", "11", "12"]

Answer 1

var pushObj = {};
$('.photo-box[data="images100"] .photo div').each(function () {
    pushObj[$(this).attr('imageid')] = true;
});

var res = [];
for (var i in pushObj) {
    res.push(i);
}
console.log(res)

http://jsfiddle.net/drph1fLc/1/

var res = [];
$('.photo-box[data="images100"] .photo div').each(function () {
    res.push($(this).attr('imageid'));
});

console.log(res, "With duplicates")
console.log(jQuery.unique(res), "Without duplicates")

http://jsfiddle.net/drph1fLc/2/

Answer 2

var image_ids = [];
$('.photo-box[data="images100"] .photo div').each(function() {
    var image_id = $(this).attr('imageid');
    if (image_ids.indexOf(image_id) == -1) {
        image_ids.push(image_id);
    }
});

以上将创建一个图像 ID 数组，遍历图像 div，检查图像 ID 是否已在数组中，如果不存在，则将其添加到数组中。

Answer 3

这里有两个简单的例子，一个使用纯JavaScript，另一个使用jQuery。基本原则是我们维护一个 ID 数组 我们已经看到 并且只添加 imageid 属性的值（如果它不存在于 ID 数组中）。

出于演示目的，我省略了您复杂的选择器（您可能需要考虑重构它，因为它的效率非常低）。

使用纯JavaScript

var elements = document.querySelectorAll('[imageid]');
var ids = [];

for(var i = 0; i < elements.length; i++) {
  var element = elements[i];
  var elementImageId = element.getAttribute('imageid');
  
  if(ids.indexOf(elementImageId) === -1) {
    ids.push(elementImageId);
  }
};

document.querySelector('#result').innerHTML = JSON.stringify(ids);

<div imageid="10"></div>
<div imageid="10"></div>
<div imageid="11"></div>
<div imageid="12"></div>

<div id="result"></div>

使用jQuery

var ids = [];

$('[imageid]').each(function() {
  var $element = $(this);
  var elementImageId = $element.attr('imageid');
  
  if(ids.indexOf(elementImageId) === -1) {
    ids.push(elementImageId);
  }
});

$('#result').text(JSON.stringify(ids));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div imageid="10"></div>
<div imageid="10"></div>
<div imageid="11"></div>
<div imageid="12"></div>

<div id="result"></div>

Answer 4

您可以编写自己的 jQuery 函数。像下面这样的东西会起作用：

jQuery.fn.withoutDuplicates = function(attr) {
  var elAttrs = [];
  return jQuery(this).filter(function() {
    var $el = jQuery(this);
    if (typeof $el !== typeof undefined || $el === false) { return true; }
    if (elAttrs.indexOf($el.attr(attr)) === -1) {
      elAttrs.push($el.attr(attr));
      return true;
    }
    return false;
  });
};

然后，您应该可以从您的代码中调用此函数，例如：

$('.photo-box[data="images100"] .photo div').withoutDuplicates("imageId");

Answer 5

首先，为 data-terminalid 和 data-imageid 重新放置属性 terminalid 和 imageid，如下所示：

<div class="close-image" data-imageid="11" data-terminalid="100"></div>
<div class="close-image" data-imageid="10" data-terminalid="100"></div>
<div class="close-image" data-imageid="12" data-terminalid="100"></div>
<div class="close-image" data-imageid="11" data-terminalid="100"></div>
<div class="close-image" data-imageid="10" data-terminalid="100"></div>
<div class="close-image" data-imageid="12" data-terminalid="100"></div>

然后尝试这样的事情：

var distinctId = []
$('.photo-box[data-terminalid=100] .photo div').each(function(){
     var elId = $(this).attr("data-imageid");
     if(distinctId.indexOf(elId) == -1){
           distinctId.push(elId);
     }

});

jquery。获取不重复的自定义属性数组

jquery. get custom attribute array without duplication

javascript

jquery

selector