Question

我有以下选择器：

$('.photo-box[data="images100"] .photo 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>, 
 <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 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 2

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

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

使用纯JavaScript

＆＃13;
＆＃13;
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);
＆＃13;
<div imageid="10"></div> <div imageid="10"></div> <div imageid="11"></div> <div imageid="12"></div> <div id="result"></div>
＆＃13;
＆＃13;
＆＃13;

使用jQuery

＆＃13;
＆＃13;
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));
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 3

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

首先，为terminalid和imageid重新设置您的属性data-terminalid和data-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的。获取自定义属性数组而不重复

5 个答案: