Question

Say I have a structure like so:

<div data-stuff="foo"></div>
<div data-stuff="foo"></div>
<div data-stuff="foo"></div>
<div data-stuff="bar"></div>
<div data-stuff="bar"></div>
<div data-stuff="bar"></div>
<div data-stuff="baz"></div>

And I want to hide all the divs with the same attribute except the first, so I’d get:

<div data-stuff="foo"></div>
<div data-stuff="bar"></div>
<div data-stuff="baz"></div>

Now I know I could just do this:

$('[data-stuff=foo]:gt(0), [data-stuff=bar]:gt(0), [data-stuff=baz]:gt(0)').hide();

The problem is, the value of data-stuff is dynamically generated and is unpredictable. What could I do to accomplish this task?

EDIT

The DOM elements themselves aren’t necessarily the same, so $.unique() won’t help here. It’s also important that the FIRST is the one that remains showing, so reordering can’t happen.

Answer 1

The brute force way:

var found = {};

$("[rel]").each(function(){
    var $this = $(this);
    var rel = $this.attr("rel");

    if(found[rel]){
        $this.hide();
    }else{
        found[rel] = true;
    }
});