CODEWITHSUNDEEP
javascriptjquery
Sebastian Rittau
Sebastian Rittau

Reputation: 21282

jQuery attribute selectors: How to query for an attribute with a custom namespace

Suppose I have a simple XHTML document that uses a custom namespace for attributes:

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

How do I match each element that has a certain custom attribute using jQuery? Using

$("div[custom:attr]")

does not work. (Tried with Firefox only, so far.)

Upvotes: 35

Views: 70825

Answers (5)

redsquare
redsquare

Reputation: 78677

You should use $('div').attr('custom:attr').

Upvotes: 2

Suphi Basdemir
Suphi Basdemir

Reputation: 83

the syntax for matching by attribute is:

$("div[customattr=bla]") matches div customattr="bla"

$("[customattr]") matches all tags with the attribute "customattr"

with namespace attributes like 'custom:attr' its not working

Here you can find a good overview.

Upvotes: 5

Devon
Devon

Reputation: 5784

jQuery does not support custom namespaces directly, but you can find the divs you are looking for by using filter function.

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

Upvotes: 43

Katie Kilian
Katie Kilian

Reputation: 6983

Here is an implementation of a custom selector that works for me.

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

Example usage:

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

Upvotes: 2

Fyrd
Fyrd

Reputation: 221

This works in some conditions:

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

However, for a more advanced method, see this XML Namespace jQuery plug-in

Upvotes: 19

Related Questions