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!

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!

• javascript
• jquery
• arrays

• 1 as a note, you shouldn't really be using innerHTML - what is the content of the list items you are returning? is it text? a anchor tag? – rlemon Commented Dec 6, 2011 at 3:54

5 Answers 5

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

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

http://jsfiddle/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.

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
}

The get() method returns a native array of DOM elements, not a jQuery object.

You should use jQuery:

var lists = $('ul li');

var className = lists.eq(i).attr('class');
var content = lists.eq(i).text();

If you want to loop through all the elements

$('ul li').each(function(){
var className = $(this).attr('class');
var content = $(this).text();

});

I have mented the code to better help you understand it.

$("#ul li").each(function() { /* you should only be using # selector to identify id's - if it's all ul's you want just put ul. */
    var klass = this.className; /* this refers to the native DOM object, which contains className */
    var textContents = this.innerText || this.textContent; /* the text of the list, does not include html tags */
    var childNodes = this.childNodes; /* the child nodes of the list, each unencased string of text will be converted into a TextNode */
    console.log(klass + ' ' + textContents); /* replace console.log with alert if you do not have a console */
    console.log(childNodes);
});

here is an example of the above.

Good Luck!