2008-09-18 12 views
33

Supongamos que tengo un documento XHTML simple que utiliza un espacio de nombres personalizado para los atributos:jQuery selectores de atributos: Cómo consultar para un atributo con un espacio de nombres personalizado

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

¿Cómo se Relaciona cada elemento que tiene una cierta costumbre atributo usando jQuery? Con

$("div[custom:attr]") 

no funciona. (Probado con Firefox solamente, hasta el momento.)

+0

actualización, la respuesta de Suphi es una sintaxis y las obras mucho más simple. Aunque no he hecho comparaciones de rendimiento. –

+0

¿Se supone que la declaración de prefijo de espacio de nombres es xmlns: custom =? – grantwparks

Respuesta

42

jQuery no admite espacios de nombres personalizados directamente, pero puedes encontrar los divs que estás buscando usando la función de filtro.

// 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

Temía algo así. ¡Gracias! –

3

mira aquí http://pastebin.me/48d233d998b4b

básicamente sus $ ('div') attr. ('Costumbre: attr')

+1

Aclaré mi pregunta: Quiero hacer coincidir cada elemento que tiene un atributo personalizado, no obtener el valor del atributo. –

+0

@redsquare: Esto funciona para la mayoría de los navegadores pero falla en Opera. ¿Alguna solución rápida para eso? – Gapipro

19

Esto funciona en algunas condiciones:

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

Sin embargo, para un método más avanzado, consulte this XML Namespace jQuery plug-in

+0

El complemento del espacio de nombres es un sueño. –

+0

Esta estrategia no funciona en navegadores basados ​​en Webkit como Safari y Chrome. ¿Alguna idea? – kaychaks

+1

+1, con una pequeña nota al margen: jQuery criticará las definiciones del espacio de nombres de los fragmentos XML adjuntos HTML (probado con SVG, en realidad). Destruye los atributos 'xmlns: custom =" uri "' en 'custom =" uri "', probablemente porque HTML no reconoce (generalmente?) El atributo 'xmlns'. Servir el documento como XHTML soluciona el problema, aunque puede no ser práctico en todos los casos. –

7

la sintaxis para hacer coincidir por atributos es:

$ ("div [customattr = bla]") coincidencias --div customattr = "bla" -

$ ("[customattr]") partidos todas las etiquetas con el atributo "customattr"

con espacio de nombres de atributos como 'costumbre: attr' no su trabajo

Aquí puede encontrar un buen resumen: http://www.pamaya.com/jquery-selectors-and-attribute-selectors-reference-and-examples/

+0

El artículo vinculado no hace referencia a los atributos personalizados. –

+2

Esto no es una respuesta. Básicamente se trata de repetir la pregunta y decir que los selectores no parecen funcionar con espacios de nombres. – spaaarky21

2

Aquí hay una implementación de un selector personalizado que funciona para mí.

// 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); 
    } 
}; 

Ejemplo de uso:

// 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(); 
Cuestiones relacionadas