Solved

jquery loop on an elements attributes

Posted on 2012-04-07
5
607 Views
Last Modified: 2012-08-14
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
Comment
Question by:jackjohnson44
  • 2
  • 2
5 Comments
 
LVL 20

Assisted Solution

by:BuggyCoder
BuggyCoder earned 250 total points
ID: 37820035
$('#itemId').each(function() {
  $.each(this.attributes, function(i, attribute){
     var name = attribute.name;
     var value = attribute.value;
  });
});

Open in new window

0
 
LVL 7

Accepted Solution

by:
designatedinitializer earned 250 total points
ID: 37820315
<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
 
LVL 6

Expert Comment

by:jjperezaguinaga
ID: 37821353
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
 
LVL 7

Expert Comment

by:designatedinitializer
ID: 37821740
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
 
LVL 6

Expert Comment

by:jjperezaguinaga
ID: 37822074
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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

863 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now