javascript - Simplify function for removing duplicate array -

i want find div element contain custom attribute mod append div list item. first have remove divs contain duplicate mod value. here's have done

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

this script

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; < modarray.length; i++){             modnames.push($(modarray[i]).attr('mod')) // mod value div         }          // search non duplicate mod value , index of none duplicate mod         for(var i=0; < 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 modarray filterarray using index in arrindex         for(var i=0; < arrindex.length; i++){             filterarray.push(modarray[arrindex[i]])         }          // push li array         $.each(filterarray,function(i,el){             li[i] = '<li>'+ el.outerhtml +'</li>'         })          $('<ul></ul>')             .append(li.join(''))             .appendto('.list')      } 

what can see i've used many loops, there simple way this. thanks!

we can use object map checking duplicates, see comments (i've added text mod divs can see them):

modarr($('.container').find('[mod]'));    function modarr(elements) {    // place remember mods we've seen    var knownmods = object.create(null);    // create list    var ul = $("<ul></ul>");    // loop divs    elements.each(function() {      // mod value      var mod = this.getattribute("mod");      // have one?      if (!knownmods[mod]) {        // no, add        knownmods[mod] = true;        ul.append($("<li></li>").append(this.clonenode(true)));      }    });    // put list in .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>

we can use dom check duplicates, it's bit slower (not matters number of elements here):

modarr($('.container').find('[mod]'));    function modarr(elements) {    // create list    var ul = $("<ul></ul>");    // loop divs    elements.each(function() {      // mod value      var mod = this.getattribute("mod");      // have one?      if (ul.find('div[mod="' + mod + '"]').length == 0) {        // no, add        ul.append($("<li></li>").append(this.clonenode(true)));      }    });    // put list in .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>

---

note: used this.clonenode(true) rather outerhtml because there's no need take roundtrip through markup. if want more jquery there, it's $(this).clone(); ;-) similarly, if don't this.getattribute("mod"), there's $(this).attr("mod").

---

i'd remiss if didn't point out mod invalid attribute name div elements. can use name want starting data-, though, perhaps use <div data-mod="dog"> instead.