2008-09-18 9 views
33

Supposons que j'ai un simple document XHTML qui utilise un espace de noms personnalisé pour les attributs:jQuery attribut sélecteurs: Comment interroger pour un attribut avec un espace de noms personnalisé

<html xmlns="..." xmlns:custom="http://www.example.com/ns"> 
    ... 
    <div class="foo" custom:attr="bla"/> 
    ... 
</html> 

Comment puis-je correspondre chaque élément qui a une certaine mesure attribut utilisant jQuery? L'utilisation de

$("div[custom:attr]") 

ne fonctionne pas. (Essayé avec Firefox uniquement, jusqu'à présent.)

+0

mise à jour, la réponse de Suphi est une syntaxe beaucoup plus simple et fonctionne. Cependant, je n'ai fait aucune comparaison de performance. –

+0

La déclaration de préfixe d'espace de noms est-elle supposée être xmlns: custom =? – grantwparks

Répondre

42

jQuery ne supporte pas les espaces de noms personnalisés directement, mais vous pouvez trouver les divs que vous recherchez en utilisant la fonction de filtre.

// find all divs that have custom:attr 
$('div').filter(function() { return $(this).attr('custom:attr'); }).each(function() { 
    // matched a div with custom::attr 
    $(this).html('I was found.'); 
}); 
+0

Je craignais quelque chose comme ça. Merci! –

3

regarder ici http://pastebin.me/48d233d998b4b

essentiellement ses $ ('div') attr. ('Coutume: attr')

+1

J'ai clarifié mon questin: Je veux faire correspondre chaque élément qui a un attribut personnalisé, pas la valeur de l'attribut. –

+0

@redsquare: Cela fonctionne pour la plupart des navigateurs, mais échoue à Opera. Une solution rapide pour ça? – Gapipro

19

Cela fonctionne dans certaines conditions:

$("div[custom\\:attr]")

Cependant, pour une méthode plus avancée, voir this XML Namespace jQuery plug-in

+0

Le plug-in d'espace de noms est un rêve. –

+0

Cette stratégie ne fonctionne pas dans les navigateurs basés sur Webkit comme Safari et Chrome. Une idée? – kaychaks

+1

+1, avec une petite note: jQuery va taper les définitions d'espace de noms des blocs XML ajoutés au HTML (testé avec SVG, en fait). Il écrase les attributs 'xmlns: custom =" uri "' dans 'custom =" uri "', probablement parce que HTML ne reconnaît pas (généralement?) L'attribut 'xmlns'. Le traitement du document en tant que XHTML résout le problème, mais peut ne pas être pratique dans tous les cas. –

7

la syntaxe correspondant par attribut est:

$ ("div [customattr = bla]") correspond à --div customattr = "bla" -

$ ("[customattr]") matchs tous les tags avec l'attribut "customattr"

avec espace de noms des attributs tels que la 'coutume: attr' sa ne fonctionne pas

Ici vous pouvez trouver un bon aperçu: http://www.pamaya.com/jquery-selectors-and-attribute-selectors-reference-and-examples/

+0

L'article lié ne fait pas référence aux attributs personnalisés. –

+2

Ceci n'est pas une réponse. Il s'agit simplement de reformuler la question et de dire que les sélecteurs ne semblent pas fonctionner avec les espaces de noms. – spaaarky21

2

Voici une implémentation d'un sélecteur personnalisé qui fonctionne pour moi.

// Custom jQuery selector to select on custom namespaced attributes 
$.expr[':'].nsAttr = function(obj, index, meta, stack) { 

    // if the parameter isn't a string, the selector is invalid, 
    // so always return false. 
    if (typeof meta[3] != 'string') 
     return false; 

    // if the parameter doesn't have an '=' character in it, 
    // assume it is an attribute name with no value, 
    // and match all elements that have only that attribute name. 
    if (meta[3].indexOf('=') == -1) 
    { 
     var val = $(obj).attr(meta[3]); 
     return (typeof val !== 'undefined' && val !== false); 
    } 
    // if the parameter does contain an '=' character, 
    // we should only match elements that have an attribute 
    // with a matching name and value. 
    else 
    { 
     // split the parameter into name/value pairs 
     var arr = meta[3].split('=', 2); 
     var attrName = arr[0]; 
     var attrValue = arr[1]; 

     // if the current object has an attribute matching the specified 
     // name & value, include it in our selection. 
     return ($(obj).attr(attrName) == attrValue); 
    } 
}; 

Exemple d'utilisation:

// Show all divs where the custom attribute matches both name and value. 
$('div:nsAttr(MyNameSpace:customAttr=someValue)').show(); 

// Show all divs that have the custom attribute, regardless of its value. 
$('div:nsAttr(MyNameSpace:customAttr)').show(); 
Questions connexes