2011-07-29 3 views
3

J'utilise dojo.query, qui utilise en interne des sélecteurs CSS3 pour identifier les éléments que vous voulez récupérer. Ce que j'essaye de trouver est tous les éléments avec l'étiquette "foo", mais seulement le plus extérieur (c'est-à-dire qu'il est permis qu'un "foo" soit incorporé dans un autre, et je veux les ignorer). Les éléments extérieurs peuvent apparaître à n'importe quel niveau du document, imbriqués dans presque n'importe quel autre élément.Sélecteur CSS3 pour "non descendant" ou "trouver le plus externe"?

Bien sûr, dojo.query('foo') renvoie tous les éléments foo, y compris ceux imbriqués (dont je ne veux pas).

Ma tentative suivante a été dojo.query('foo:not(foo foo)'), mais cela ne renvoie aucun résultat (puisque les sélecteurs descendants ne sont pas des "sélecteurs simples" donc ne sont pas supportés par :not).

Je sais que la solution de niveau CSS habituelle pour ce genre de chose est de définir deux règles (foo et foo foo), de sorte que les éléments imbriqués peuvent être traités différemment. Mais cela ne marchera pas dans ce cas (puisqu'il ne s'agit que d'une seule sélection). (Cela me semble également désordonné dans le vrai CSS, puisque les éléments imbriqués reçoivent quand même la première règle, rendant impossible l'utilisation de la valeur par défaut du navigateur ou du parent pour quelque chose que la première règle remplace.)

Si cela aide, au moins au moment où un truc est dans un autre, il doit être un enfant direct, bien qu'ils puissent se retrouver imbriqués à n'importe quel niveau. (.-À-dire « foo> foo » correspondrait aussi avec succès tous les éléments foo imbriqués, mais malheureusement, c'est toujours le contraire de ce que je veux.)

Modifier: la solution de contournement que je utilise en ce moment est ci-dessous, bien que Je suis toujours en espérant quelque chose d'un peu plus élégant (et plus de sécurité ancêtre, dans le cas où il peut y avoir imbrication indirecte):

dojo.query('foo').forEach(function(foo) { 
    if (foo.parentNode.localName == 'foo') { return; } 
    // ... 
}); 
+0

Comme toujours: il n'y a pas de sélecteur CSS ancêtre. – BoltClock

Répondre

1

Si ce sera toujours les descendants directs, alors vous pouvez le faire

dojo.query("foo").filter(function(item) { 
    return (item.parentNode.nodeName.toLowerCase() !== "foo"); 
}) 
+0

C'est assez proche de la solution hacky que j'utilise en ce moment que je vais donner une tique, mais j'espérais quelque chose d'un peu plus élégant. J'ai modifié la question pour inclure ma solution de contournement actuelle. – Miral

Questions connexes