Get list elements and its classes using jquery

Question

I used $('#ul li').get() to get all the list elements and stored in an array, each of this list elements have classes...

var i;
var listClass = ('#ul li').get();
for(i=0;i<listClass.length;i++){
    var theClass = listClass[i].attr("class"); //<--what's the proper function/method/code for this?
    var content = listClass[i].innerHTML; //<-- works very well

    //other codes here
}

How may i able to get the classes of each list elements...Thanks!

Answer 1

You can use jQuery's own map to do that:

alert($('#ul li').map(function() {
    return this.className;
}).get());

http://jsfiddle.net/MhVU7/

for example. You can do anything with the returned array.

The reason the way you're doing it isn't working is because you're calling the non-existent method .attr on a native DOM element - it's not an extended jQuery object.

Answer 2

var lis = document.getElementById("ul").children;
for (var i = 0, len = lis.length; i < len; i++) {
  var li = lis[i],
      className = li.className,
      value = li.value,
      text = li.textContent;

  // code
}