filtre JQuery sur la classe des enfants après .get()

Question

Problème: Je veux faire un (.get) mais seulement avec les éléments sans .played classe. (Je construis une playlist aléatoire, les numéros joués sont marqués par un .played class sur leur div).

Code actuel:

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

Ce que j'ai essayé: le filtre() et beaucoup de tours de sélection, aucun d'entre eux réussissent. Je suis très intéressé par la façon dont vous allez résoudre un problème comme celui-ci!

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

Comme d'autres l'ont mentionné, vous pouvez utiliser le sélecteur :not(). Vous pouvez également utiliser la méthode .not() qui fonctionne de la même manière que .filter(), sauf qu'elle réduit les éléments qui ne correspondent pas au sélecteur.

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

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

Voici un exemple de jQuery.com pour .pas(): http://jsfiddle.net/JVNVL/.

Answer 2

$("#playlistVideos .vt:not(.played)").get() 

devrait suffire.

Answer 3

Essayez d'utiliser le sélecteur :not:

$('#playlistVideos .vt:not(.played)')