CODEWITHSUNDEEP
javascriptjquery
user4313867
user4313867

Reputation:

Adding dynamic second class Jquery

I'm trying to add a second class to a group of buttons using a for loop in jQuery, with the second class set to the number of the current iterator(i). The first class for each button is assigned to "users". I want each button to have a dynamic second class so that when clicked, I can use its second class as an index to access a particular key in an object.

The problem I'm having is that each button has its second class set to 0. "users" is an array with length 4, so the buttons should have as their second class 0,1,2,3 in order. 

$(document).ready(function(){
    for(var i = 0; i < users.length; i++) {
    var $currentUser = $('<button class="users '+ i +'"></button>');
        $currentUser.text(users[i]);
        $currentUser.appendTo('.userList');
      }

    $(".users").click(function() {
      alert($(".users").attr('class').split());
    // Alert returns "users 0" for each button.
    });
});

The alert at the bottom is just a placeholder for now to check that the classes are set correctly. Thanks!

Upvotes: 0

Views: 140

Answers (2)

Nishit Maheta
Nishit Maheta

Reputation: 6031

change code to below . change $(".users") to $(this) when you click on element.

$(".users").attr('class') always return all button element.

$(".users").click(function() {
  alert($(this).attr('class').split());
});

Upvotes: 2

Arun P Johny
Arun P Johny

Reputation: 388316

When you use a getter method like .attr('class') on a set of elements, it will return the value of the first element in the set. when you say $('.users') it will return all elements with the class users.

In your case you want to have reference to the clicked button, which is available in the click handler as this so you can

$(document).ready(function() {
  var users = ['u1', 'u2', 'u3']
  for (var i = 0; i < users.length; i++) {

    var $currentUser = $('<button class="users ' + i + '"></button>');
    $currentUser.text(users[i]);
    $currentUser.appendTo('.userList');
  }

  $(".users").click(function() {
    alert(this.className.split(/\s+/));
    alert(this.classList); //for ie 10+
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="userList"></div>

Upvotes: 1

Related Questions