Question

Problem: I want to do a .get() but only with the elements without the .played class. (I’m building a shuffle playlist, played numbers are being marked by a .played class on their div).

Current code:

var randomElements = $("#playlistVideos").get();

What I tried: the filter() and a lot of selector tricks, none of them succeed. I’m very interested in how you will solve a problem like this!

HTML:

<div id="playlistVideos">
<div class="vt ddsitem">
    <a href="javascript:loadAndPlayVideo('wQ5iFQv1KaE')"><img class="pt" id="wQ5iFQv1KaE" src="http://i.ytimg.com/vi/wQ5iFQv1KaE/default.jpg"></a>
    <div>
        <img style="width: 18px; height: 18px; position: relative; left: 100px; bottom: 98px;" class="updown" src="images/updown.gif"><a style="cursor: pointer;" href="javascript:deleteVideo('wQ5iFQv1KaE')"><img style="width: 18px; height: 18px; position: relative; left: 150px; bottom: 98px; cursor: pointer;" class="bin" src="images/bin.gif"></a>
    </div>
</div>
<div class="vt ddsitem">
    <a href="javascript:loadAndPlayVideo('Ya3_wQpzDIU')"><img class="pt" id="Ya3_wQpzDIU" src="http://i.ytimg.com/vi/Ya3_wQpzDIU/default.jpg"></a>
    <div>
        <img style="width: 18px; height: 18px; position: relative; left: 100px; bottom: 98px;" class="updown" src="images/updown.gif"><a style="cursor: pointer;" href="javascript:deleteVideo('Ya3_wQpzDIU')"><img style="width: 18px; height: 18px; position: relative; left: 150px; bottom: 98px; cursor: pointer;" class="bin" src="images/bin.gif"></a>
    </div>
</div>
<div class="vt ddsitem played">
    <a href="javascript:loadAndPlayVideo('Dq0hrmT7JiQ')"><img class="pt" id="Dq0hrmT7JiQ" src="http://i.ytimg.com/vi/Dq0hrmT7JiQ/default.jpg"></a>
    <div>
        <img style="width: 18px; height: 18px; position: relative; left: 100px; bottom: 98px;" class="updown" src="images/updown.gif"><a style="cursor: pointer;" href="javascript:deleteVideo('Dq0hrmT7JiQ')"><img style="width: 18px; height: 18px; position: relative; left: 150px; bottom: 98px; cursor: pointer;" class="bin" src="images/bin.gif"></a>
    </div>
</div>
<div class="vt ddsitem">
    <a href="javascript:loadAndPlayVideo('WklNzfvit9E')"><img class="pt" id="WklNzfvit9E" src="http://i.ytimg.com/vi/WklNzfvit9E/default.jpg"></a>
    <div>
        <img style="width: 18px; height: 18px; position: relative; left: 100px; bottom: 98px;" class="updown" src="images/updown.gif"><a style="cursor: pointer;" href="javascript:deleteVideo('WklNzfvit9E')"><img style="width: 18px; height: 18px; position: relative; left: 150px; bottom: 98px; cursor: pointer;" class="bin" src="images/bin.gif"></a>
    </div>
</div>

Answer 1

As others have mentioned, you can use the :not() selector. You can also use the .not() method which works in a similar way to .filter() except that it narrows down to elements that don’t match the selector.

// Using :not()
var randomElements = $('#playlistVideos .vt:not(.played)').get();

// Using .not()
var randomElements = $('#playlistVideos .vt').not('.played').get();

Here is an example from jQuery.com for .not(): http://jsfiddle.net/JVNVL/.