CODEWITHSUNDEEP
javascriptjquery
Stir Zoltán
Stir Zoltán

Reputation: 4053

How to get the name of a custom attribute with jQuery?

I have an attribute which might look like this abcjQuery12345, these numbers are just an example.
Is there a way to determine an attribute which contains a substring in jQuery?

E.g. abcjQuery12344353452343452345="12"

The only thing I know is that the attribute will contain abc.

Upvotes: 2

Views: 1648

Answers (9)

Mohd Shoaib
Mohd Shoaib

Reputation: 1

var myAttr = $("#idOfElement").attr("your_custom_attribute_name");

Upvotes: -1

Adil
Adil

Reputation: 148110

You can do it like this, Demo on JsFiddle 

<div id="div1" myattr="hello" myAttr12342="hello1">Any text</div>​


el = document.getElementById('div1');
attrs=el.attributes
for (var i=0; i<attrs.length; i++)
{
    attrName = attrs.item(i).nodeName;
    attrValue = attrs.item(i).nodeValue; 
    //alert(attrs.item(i).nodeName);
    if(attrName.indexOf('myattr') != -1)
    {
        alert("Attr Name " + attrName + " Attr Value " + attrValue );
    }        
}
​

​

Upvotes: 1

adeneo
adeneo

Reputation: 318182

var abcAttr, abcName;

​$.each($("#elementID")​[0].attributes, function(index, item) {
    if (item.nodeName.match(/^abc/)) {
        abcName = item.nodeName;
        abcAttr = item.nodeValue;
    }
});

FIDDLE

Upvotes: 1

ilyes kooli
ilyes kooli

Reputation: 12043

A simple function to get attribute value given a string contained in the attribute name:

function getVal(element,name){
   var pattern=new RegExp(name,'i');
   return $.grep($(element)[0].attributes, function(n){
       if (n.name.match(pattern)) return n.nodeValue;
   })[0].nodeValue;
}

DEMO

Upvotes: 0

siniradam
siniradam

Reputation: 2929

if i understand your question here is your answer;

working example: http://jsfiddle.net/gRsxM/

/*!
 * listAttributes jQuery Plugin v1.1.0
 *
 * Copyright 2010, Michael Riddle
 * Licensed under the MIT
 * http://jquery.org/license
 *
 * Date: Sun Mar 28 05:49:39 2010 -0900
 */
if(jQuery) {
    jQuery(document).ready(function() {
        jQuery.fn.listAttributes = function(prefix) {
            var list = [];
            $(this).each(function() {
                var attributes = [];
                for(var key in this.attributes) {
                    if(!isNaN(key)) {
                        if(!prefix || this.attributes[key].name.substr(0,prefix.length) == prefix) {
                            attributes.push(this.attributes[key].name);
                        }
                    }
                }
                list.push(attributes);
            });
            return (list.length > 1 ? list : list[0]);
        }
    });
}


$(document).ready(function(){

    $('input').each(function(){
        var attrs = $(this).listAttributes();
         for(var i=0;i<attrs.length;i++){
            if(attrs[i].indexOf("abc")>-1) itemProccess($(this));
        }

    });
});


function itemProccess(item){
    console.log(item);
}
​

Upvotes: 0

m90
m90

Reputation: 11822

You can loop through all the attributes and check if they contain the string you are looking for. With:

​<div customAttr="12" title="me"></div>
<div anotherAttr="Bear"></div>
<div yetAnotherAttr="Elephant"></div>

You could use:

var m = /another/i; //will look for 'another' in the attribute name (i-flag for case-insensitive search)

$('div').each(function(){
    var $this = $(this);
    $.each(this.attributes,function(){
        if (this.name.match(m)){
            $this.addClass('selected'); //either select the matching element
            $this.text(this.name + ' : ' + this.value); //or use its custom-attribute's value
        }
    });
});​

See a fiddle

Upvotes: 2

Sameh Serag
Sameh Serag

Reputation: 746

You can use that :

$('a[@name^="abcjQuery"]')

Upvotes: 0

Ravi Gadag
Ravi Gadag

Reputation: 15861

Jquery.attr() method should do the trick 

var value = $('#element').attr('abcjQuery' + someCustom);

but i suggest you to use data- attributes. like this by using Jquey.data()

<div id="div1" data-myattr="abcjQuery12345">Any text</div>​

for retriving : 

var value = $('#div1').data('myattr');
alert(value):

Upvotes: 0

FishBasketGordo
FishBasketGordo

Reputation: 23132

You can do this:

var customNum = 12345; // Switch this out as necessary.
var value = $('#element').attr('abcjQuery' + customNum);

Here's a working example.

Upvotes: 0

Related Questions