web-dev-qa-db-fra.com

Comment utiliser jQuery pour sélectionner tous les enfants sauf un élément select

J'ai un div (disons que l'id est "container") avec de nombreux éléments, y compris un élément select. Je voudrais tout sélectionner dans le div sauf le select. Ce que j'ai essayé:

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

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

Également essayé sans sélecteur descendant générique, donc comme tout ce qui précède, mais

$("#container:not(#selectorid)")
jquerydrop-down-menu
50
Shawn J. Goff

Vous pouvez simplement omettre le caractère générique car il est facultatif dans ce cas, mais conservez l'espace:

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

Vous pouvez également utiliser la méthode .not () pour filtrer la sélection après avoir sélectionné tous les enfants:

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

Si votre problème est que les enfants de select sont toujours inclus, vous pouvez les filtrer explicitement avec la méthode .not ():

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

ou sélectionnez uniquement les enfants directs:

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

Vous pouvez essayer les sélecteurs jQuery sur le testeur de sélecteur interactif jQuery pour un retour rapide; essayez par exemple div :not(ol) ou div > :not(ol) pour avoir une idée de la différence que fait le sélecteur enfant direct (>).

73
Martijn Pieters

Vous pouvez également l'essayer en utilisant des méthodes de traversée:

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

ou étant une option finale:

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

Utiliser :not Et .not() pour sélectionner et filtrer " Live Demo

:not(selector) fait exactement cela, et il existe en quelques styles. Vous pouvez utiliser le sélecteur , ou la méthode . Voici un exemple d'utilisation du sélecteur:

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

Cela correspondra à tout enfant dans #container Qui n'est pas un élément <select>. Ensuite, nous avons la méthode mode d'exclusion, qui porte le même nom, mais doit être exécutée différemment:

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

Cela fonctionne avec le children des éléments correspondants. Dans ce cas, .not Agit comme un filtre. Ce qui m'amène à l'exemple suivant, en utilisant .filter() pour obtenir les résultats souhaités. Avec cette méthode, nous pouvons fournir notre propre fonction personnalisée pour fouiller dans les résultats et choisir ceux que nous voulons:

Utiliser .filter() pour filtrer les éléments correspondants " Live Demo

$( "#container" ).children().filter( isNotSELECT ).fadeTo( "slow", .5 );​​​​​​​​​​​​​​​​​​​​​​​​​​​

function isNotSELECT () {
    // Returns TRUE if element is NOT select
    return !$(this).is("select");
}

Dans cet exemple, nous sélectionnons tous les enfants de #container, Puis nous les passons à travers un filtre que nous avons défini appelé "isNotSelect". Dans notre filtre, nous renvoyons true ou false pour chaque élément. Si nous renvoyons true, cet élément sera renvoyé au jeu de résultats. Si nous retournons false, cet élément sera supprimé du jeu de résultats. Nous demandons si l'élément n'est pas une sélection. Cela renverra false pour tous les éléments sélectionnés, les supprimant ainsi de notre collection.

4
Sampson
$(#container select).siblings()

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

2
Mike Kormendy

gestionnaire de clics JQuery pour tout sauf un certain objet
Deux approches du problème: celle avec 8 votes est probablement celle que vous recherchez.

1
Dirk

peut-être que cela peut vous aider où 3 est le #select

essayez l'un d'eux:

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

Ce que vous attendez réellement de votre question n'est pas clair. : not (select) filtrera la sélection de tous les descendants mais elle ne filtrera pas les descendants sélectionnés. Si c'est votre problème, essayez ce qui suit

Démo

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