• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 619
  • Last Modified:

jquery loop on an elements attributes

1. How do I loop and console.log (or alert) an elements attributes names and values.
2. How can I do the same thing, but by passing in a "starts with" string.  For example
$(element).getAttributes()
$(element).getAttributesStartsWith("customprefix_")

Thanks!
0
jackjohnson44
Asked:
jackjohnson44
  • 2
  • 2
2 Solutions
 
BuggyCoderCommented:
$('#itemId').each(function() {
  $.each(this.attributes, function(i, attribute){
     var name = attribute.name;
     var value = attribute.value;
  });
});

Open in new window

0
 
designatedinitializerCommented:
<html>
<head>
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script>
function attrLogToConsole(itemID){
	$(itemID).each(function() {
	  $.each(this.attributes, function(i, attribute){
		 var name = attribute.name;
		 var value = attribute.value;
		 console.log("Name:"+name+"  \tValue:"+value);
	  });
	});
}
function attrStartsWith(itemID, starts){
	$(itemID).each(function() {
	  $.each(this.attributes, function(i, attribute){
		 var name = attribute.name;
		 var value = attribute.value;
		 if(name.indexOf(starts) == 0) console.log("Name:"+name+"  \tValue:"+value);
	  });
	});
}
$(document).ready(function() {
	console.log("Attributes for #field:");
	attrLogToConsole('#field');
	console.log("\nAnd now, for something completely different:");
	attrStartsWith('#field', 'si');
});
</script>
</head>
<body>
<form name="form1" action="" method="post">
<input type="text" id="field" size="40" name="subject" Value="This is an input field" />
<input type="submit">
</form>
</body>

Open in new window

0
 
jjperezaguinagaCommented:
Greetings jackjohnson44,

First, you are looking for a functionality that it's not implemented within jQuery but inside the Javascript definition. JQuery doesn't have a getAttributes method, although can be implemented easily (See code at the end of the answer). From there, you just want to check if the first attribute is the one you want.

I strongly advice experts to use http://jsfiddle.net/ when answering this kind of questions, so we don't clutter the responses with codes. There are multiple tutorials about it, in case you need one.

Alas, the code: http://jsfiddle.net/HZKRT/

Hope it helps,
-JJ
0
 
designatedinitializerCommented:
JJ:

I strongly advise you not to advise me.
I stand by my code. I don't stand by 3rd party code.
(except jQuery, in this case...)

jsfiddle is nice, thanks, but... no, thanks.
You just need to copy and paste my code to see it simply works.
You would have saved yourself the trouble.
0
 
jjperezaguinagaCommented:
designatedinitializer,

Don't take it personal :) By relying in a third party you can easily get more feedback from people outside EE, update your examples without having to add an extra comment (which often leads to making the authors read all the comments to check the final version), fork other's people examples (like other's experts contributions), separate the three layers of the web (behavior -js-, content -html- and presentation -css) in a easy, sintax highlighted way. These are just a few pros I find in using jsfiddle; I would to hear some cons.

I don't doubt your code works, but I feel that a click in a link is faster than copying and pasting.

Finally, by all means feel free to advice me: I wouldn't be half the developer I am without the advice and help of my peers, friends, experts and co-workers.

Cheers!
-JJ
0

Featured Post

[Webinar] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now