Get attribute values from html elements with jquery

Question

I'm a bit stuck. I'd like to get the attribute value "for" using a jquery selector. Though I am able to successfully log to the console, how can I get/log just the value for the attribute "for" on the labels? I've tried console.log(labels['for']) but that isn't the way to go. Below is the related code.

HTML:

<div class="inline-group" id="album_set-group">
  <h2>Albums</h2> 
  <div class="inline-related"> 
    <h3><b>Album:</b>&nbsp;<span class="inline_label">#1</span></h3>
    <fieldset class="module aligned ">
      <div class="form-row field-name">
        <div>
          <label for="id_album_set-0-name">Name:</label> <input id="id_album_set-0-name" maxlength="100" name="album_set-0-name" type="text"> 
        </div>
      </div>
      <div class="form-row field-release_date">
        <div class="date-field">
          <label for="id_album_set-0-release_date">Release date:</label> <input id="id_album_set-0-release_date" name="album_set-0-release_date" type="text">
        </div>
      </div>
    </fieldset>
  </div>
</div>

JAVASCRIPT:

$(document).ready(function() {
   var labels = $( "#album_set-group" ).find( "label" );
   console.log(labels);
});

To get attribute of all labels, you will have to use loop/.each.. Use .attr(ATTR_NAME) — Rayon
– Rayon, Commented Apr 7, 2016 at 19:51

Herbi Shtini · Accepted Answer · 2016-04-07 20:10:35Z

2

Please read http://api.jquery.com/attr/ for get attr

try this code:

$(document).ready(function() {
   var labels = $("#album_set-group").find("label");
   labels.each(function() {
      console.log($(this).attr('for'));
   });
});

Result: https://jsfiddle.net/cmedina/xo67uqc7/

edited Apr 7, 2016 at 20:10

Herbi Shtini

2,06029 silver badges34 bronze badges

answered Apr 7, 2016 at 20:00

CMedina

4,2824 gold badges28 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jordi Ruiz · Accepted Answer · 2016-04-07 19:55:51Z

1

You can use just the method .attr(). In your case you can do something like

$("#album_set-group").find("label").each(function() {
  console.log($(this).attr('for'));
});

answered Apr 7, 2016 at 19:55

Jordi Ruiz

4872 silver badges11 bronze badges

1 Comment

Darc Nawg Over a year ago

CMedina gave me a more complete answer with reference and a jsfiddle, so I accepted his answer. I gave yours an upvote.

zer00ne · Accepted Answer · 2016-04-07 20:00:21Z

Plain JavaScript:

Collect the <label>s into a NodeList with querySelectorAll()
Convert NodeList into an array with Array.prototype.slice.call()
Iterate through the array and on each iteration, use getAttribute() to get the for attribute.
push each for into a new array.
console.log(newArray)

Snippet

var labelList = document.querySelectorAll('label');
var labelArray = Array.prototype.slice.call(labelList);
var total = labelList.length;
var forArray = [];
for (var i = 0; i < total; i++) {
  var forAttr = labelArray[i].getAttribute('for');
  forArray.push(forAttr);
}

console.log('for: ' + forArray);

<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
<div class="inline-group" id="album_set-group">
  <h2>Albums</h2> 
  <div class="inline-related">
    <h3><b>Album:</b>&nbsp;<span class="inline_label">#1</span></h3>
    <fieldset class="module aligned ">
      <div class="form-row field-name">
        <div>
          <label for="id_album_set-0-name">Name:</label>
          <input id="id_album_set-0-name" maxlength="100" name="album_set-0-name" type="text">
        </div>
      </div>
      <div class="form-row field-release_date">
        <div class="date-field">
          <label for="id_album_set-0-release_date">Release date:</label>
          <input id="id_album_set-0-release_date" name="album_set-0-release_date" type="text">
        </div>
      </div>
    </fieldset>
  </div>
</div>

Collectives™ on Stack Overflow

Get attribute values from html elements with jquery

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related