简化删除重复数组的函数

Question

我想找到包含自定义属性 mod 的 div 元素，而不是将该 div 附加到列表项。但首先我必须删除包含重复 mod 值的 divs。这是我所做的

<div class="list"></div>

<div class="container">
    <div mod="dog"></div>
    <div mod="man"></div>
    <div mod="woman"></div>
    <div mod="dog"></div>
    <div mod="bird"></div>
    <div mod="insects"></div>
    <div mod="dog"></div>
</div>

这是我的脚本

modArr($('.container').find('[mod]'))

function modArr(el){
        var filterArray = [] // store mod
        ,   modNames = [] // store mod value
        ,   arrIndex = [] // store non duplicate index
        ,   li = [] // store
        modArray = el

        // store mod value
        for(var i=0; i < modArray.length; i++){
            modNames.push($(modArray[i]).attr('mod')) // get mod value from div
        }

        // search for non duplicate mod value and get the index of none duplicate mod
        for(var i=0; i < modArray.length; i++){
            if(filterArray.indexOf(modNames[i]) === -1){
                filterArray.push(modNames[i])
                arrIndex.push(i) // push non duplicate index value
            }
        }

        filterArray = [] // reset filterArray

        // push module from modArray to filterArray using index in arrIndex
        for(var i=0; i < arrIndex.length; i++){
            filterArray.push(modArray[arrIndex[i]])
        }

        // push to li array
        $.each(filterArray,function(i,el){
            li[i] = '<li>'+ el.outerHTML +'</li>'
        })

        $('<ul></ul>')
            .append(li.join(''))
            .appendTo('.list')

    }

你可以看到我已经习惯了很多循环，有什么简单的方法可以做到这一点。谢谢！

Answer 1

试试这个，只有当mod 的元素不在list 中时才添加：

$('.list').append('<ul>');
$('.container [mod]').each(function(index, el) {
  if($('.list [mod=' + $(el).attr('mod') + ']').length === 0) {
    $('.list ul').append($('<li>' + el.outerHTML + '</li>'));
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="list"></div>

<div class="container">
    <div mod="dog">Dog1</div>
    <div mod="man">Man1</div>
    <div mod="woman">Woman1</div>
    <div mod="dog">Dog2</div>
    <div mod="bird">Bird1</div>
    <div mod="insects">Insect1</div>
    <div mod="dog">Dog3</div>
</div>

Answer 2

我们可以将对象用作检查重复项的地图，请参阅 cmets（我已将文本添加到 mod div 以便我们可以看到它们）：

modArr($('.container').find('[mod]'));

function modArr(elements) {
  // A place to remember the mods we've seen
  var knownMods = Object.create(null);
  // Create the list
  var ul = $("<ul></ul>");
  // Loop the divs
  elements.each(function() {
    // Get this mod value
    var mod = this.getAttribute("mod");
    // Already have one?
    if (!knownMods[mod]) {
      // No, add it
      knownMods[mod] = true;
      ul.append($("<li></li>").append(this.cloneNode(true)));
    }
  });
  // Put the list in the .list element
  ul.appendTo(".list");
}

<div class="list"></div>

<div class="container">
    <div mod="dog">dog</div>
    <div mod="man">man</div>
    <div mod="woman">woman</div>
    <div mod="dog">dog</div>
    <div mod="bird">bird</div>
    <div mod="insects">insects</div>
    <div mod="dog">dog</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

我们也可以只使用 DOM 来检查重复项，但它有点慢（这里的元素数量并不重要）：

modArr($('.container').find('[mod]'));

function modArr(elements) {
  // Create the list
  var ul = $("<ul></ul>");
  // Loop the divs
  elements.each(function() {
    // Get this mod value
    var mod = this.getAttribute("mod");
    // Already have one?
    if (ul.find('div[mod="' + mod + '"]').length == 0) {
      // No, add it
      ul.append($("<li></li>").append(this.cloneNode(true)));
    }
  });
  // Put the list in the .list element
  ul.appendTo(".list");
}

<div class="list"></div>

<div class="container">
    <div mod="dog">dog</div>
    <div mod="man">man</div>
    <div mod="woman">woman</div>
    <div mod="dog">dog</div>
    <div mod="bird">bird</div>
    <div mod="insects">insects</div>
    <div mod="dog">dog</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

---

注意：我使用了this.cloneNode(true) 而不是outerHTML，因为不需要通过标记进行往返。如果你想要更多的 jQuery，那就是 $(this).clone(); ;-) 同样，如果你不喜欢 this.getAttribute("mod")，那就是 $(this).attr("mod")。

---

如果我没有指出 mod 是 div 元素的无效属性名称，那我就失职了。不过，您可以使用任何以data- 开头的名称，因此不妨改用<div data-mod="dog">。