How to use jQuery to select all children except select element

Question

I have a div (let's say id is a "container") with many elements in it, including the select element. I would like to select everything in the div except select. Things I tried:

$("#container *:not(select)") $("#container *:not(#selectorid)") //put a div around the select and... $("#container *:not(#selectorcontainer)") $("#container *:not(#selectorcontainer *)") $("#container *:not(#selectorcontainer, #selectorcontainer *)") 

Also tried without a wildcard descendant selector, so like all above, but

 $("#container:not(#selectorid)") 

Answer 1

You can simply omit the wildcard, since in this case it is optional, but keep the space:

 $('#container :not(select)'); 

Alternatively, use the .not () method to filter the selection after selecting all the children:

 $('#container').children().not('select'); 

If your problem is that the children from select are still on, you can explicitly filter them using the .not () method:

 $('#container').children().not('select, option, optgroup'); 

or select only direct children:

 $('#container > :not(select)'); 

You can try the jQuery selector in the interactive jQuery selector tester for quick feedback; try, for example, div :not(ol) or div > :not(ol) to see the difference the direct child ( > ) selector makes.

Answer 2

Using :not and .not() to select and filter & raquo; Live demo

:not(selector) does just that, and it comes in several styles. You can use a selector or method. The following is an example of using a selector:

 $("#container :not(select)"); 

This will match any child #container that is not a <select> element. Then we have an exception method that has the same name, but must be executed differently:

 $("#container").children().not("select"); 

This runs against children matched elements. In this case .not acts as a filter. This leads me to the following example, using .filter() to get the desired results. With this method, we can provide our own custom function to rummage through the results and select the ones we want:

Using .filter() to filter matched elements & raquo; Live demo

 $( "#container" ).children().filter( isNotSELECT ).fadeTo( "slow", .5 );​​​​​​​​​​​​​​​​​​​​​​​​​​​ function isNotSELECT () { // Returns TRUE if element is NOT select return !$(this).is("select"); } 

In this example, we select all the #container and then pass them through the filter we defined, called "isNotSelect". In our filter, we return either true or false for each element. If we return true , this element will be returned to the result set. If we return false , this item will be removed from the result set. We ask if the item is selected. This will return false for all select elements, removing them from our collection.

Answer 3

You can also try it using the move methods:

 $('#container').children().not('#selectorId'); 

or is the final option:

 $('#container').children().filter(function(){ return $(this).attr('id') !== 'selectorId'; } 

Answer 4

 $(#container select).siblings() 

http://docs.jquery.com/Traversing/siblings

Answer 5

JQuery handler for everything except a specific object
Two approaches to the problem: one with 8 votes , probably the one you are looking for.

Answer 6

It is not clear what you really want from your question. : not (select) filters out the selection from all descendants, but does not select the selected descendants. If this is your problem, try the following

Demo

 $("#container *").filter( function(){ return $(this).closest('select').length === 0 }) 

Answer 7

maybe this can help you where 3 is #select

try one of them:

 $("#container *:not(eq(3))"); $("#container").children().filter(:not(eq(3)));