Question

I wanted to get all the children tags inside a div:

<div class="form input">
            <label class="formLabel cFont cColor cMore" id="text" for="textInput">please input something</label>
            <input class="formInput" type="text" id="textInput">
            <label class="formLabel" id="check" for="checkboxInput">check here to toggle disable</label>
            <input class="formInput" type="checkbox" id="checkboxInput">
        </div>
        <button type="button" onclick="showClasses()">show classes</button>

I did the following:

function showClasses(){
        var children = $('.form').children();
        children.each(function(index, v){
            var classes = v.attr('class');
            console.log(classes);
        }); // end each
    } // end showClasses

and the console gave me an error:

Uncaught TypeError: Object #<HTMLLabelElement> has no method 'attr'

Then, I change the code to :

function showClasses(){
        var children = $('.form').children();
        children.each(function(){
            var classes = $(this).attr('class');
            console.log(classes);
        }); // end each
    } // end showClasses

then it works.

So what is the different between .each(function(index, element)) and .each(function()) ? why can’t i use the 1st one in my code?

Answer 1

In children.each(function(index, v){ – v is domElement. Try using .attr like below,

var classes = $(v).attr('class');

Full code:

function showClasses(){
    var children = $('.form').children();
    children.each(function(index, v){
        var classes = $(v).attr('class');
        console.log(classes);
    }); // end each
} // end showClasses