Getting children through id vs class in jQuery

Question

I was using id to get children and now i changed to use class. Doing so what I find out is using class doesn't return the children.

Working code

//Don't remove first element of select box with id 'someSelectBox'    
$('#someSelectBox').children('option:not(:first)').remove();

Not working code

//Don't remove first element of ALL select box with class 'selectBoxClass'
$('.selectBoxClass').children('option:not(:first)').remove();

Can anyone explain why? And possible workout or alternative implementation idea.

Thanks

Answer 1

If you want to exclude the first option of each select element then you need to use the .children('option:not(:first-child)')
( that is because you are targeting multiple select elements and :first only applies to the first of the whole set of results )

Otherwise you only exclude the first option of the first select element.

---

The class should create no problems

 var options = $('.select-to-include').children('option:not(:first-child)'); options.css({color:'red'}); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <select class="select-to-include"> <option>1</option> <option>2</option> <option>3</option> </select> <select class="select-to-include"> <option>1</option> <option>2</option> <option>3</option> </select>