Solved

jquery loop on an elements attributes

Posted on 2012-04-07
5
612 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn how to dynamically set the form action using jQuery.
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)

740 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