How do I use jQuery to select all children except

问题:

I have a div (let's say the id is "container") with many elements in it, including a select element. I'd like to select all everything in the div except the select. Things I've 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 wildcard descendant selector, so just like all the above, but

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

回答1:

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

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

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

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

If your problem is that children of select are still included, you could explicitly filter those out with the .not() method:

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

or select direct children only:

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

You can try out jQuery selectors at the interactive jQuery selector tester for quick feedback; try for example div :not(ol) or div > :not(ol) to get a feel for what difference the direct child (>) selector makes.

回答2:

You can also try it using traversing methods:

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

or being a final option:

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

回答3:

Using :not, and .not() to select and filter » Live Demo

The :not(selector) does exactly this, and it comes in a couple styles. You can use the selector, or the method. Below is an example of using the selector:

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

This will match any child within #container that is not a <select> element. Then we have the method fashion of exclusion, which goes by the same name, but must be ran differently:

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

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

Using .filter() to filter the matched elements » 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 of the children of #container, and then pass them through a filter that we have defined called "isNotSelect". Within our filter, we return either true or false for every element. If we return true, that element will be returned to the result set. If we return false, that element will be removed from the result set. We're asking if the element is not a select. This will return false for all select elements, thus removing them from our collection.

回答4:

$(#container select).siblings()

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

回答5:

It is not clear what you actually want from your question. :not(select) will filter out the select from all the descendants but it will not out the select descendants. If this is your issue then try the following

Demo

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

回答6:

JQuery click handler for everything but a certain object
Two approaches to the problem: The one with 8 votes is probably the one you are looking for.

回答7:

maybe this can help you where 3 is the #select

try one of these:

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