Solved

jquery loop on an elements attributes

Posted on 2012-04-07
5
604 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

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
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)

760 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

20 Experts available now in Live!

Get 1:1 Help Now