Javascript - Un selector appropriato

Ciao a tutti, avendo questo codice html:

<select name="gallery" class="image-picker show-html" id="gallery" multiple="" style="display: none;">
   <option data-img-src="foto1.jpg" value="f1.jpg">foto1</option>
   <option data-img-src="foto2.jpg" value="f2.jpg">foto2</option>
</select>
<ul class="thumbnails image_picker_selector">
   <li class="disable-selection">
      <div class="thumbnail selected">
         <img class="image_picker_image" src="f1.jpg">
      </div>
   </li>
   <li class="disable-selection">
      <div class="thumbnail">
         <img class="image_picker_image" src="f2.jpg">
      </div>
   </li>
</ul>

il mio scopo e' intercettare il click di ogni oggetto <div class="thumbnail"> successivo al select id='gallery', e di questi contare quanti elementi hanno la classe selected. Sapreste aiutarmi? perche ho fatto diverse prove ma nessuno fa cio' che dovrebbe...

Qualcosa come:

document.querySelectorAll(".image_picker_selector .thumbnail.selected").length

?

Oh.. si, perfetto risolve il problema del totale, grazie!

E se io volessi ottenere l'id del SELECT prima dell'elenco UL, come potrei fare?

Ho risolto in questo modo:

var prev_id = $(".thumbnails").prev().attr('id');