Question

I’m unable to grab $(this) from inside the each. I’m trying to reset the css of the table after a row has been moved. “#newTaskBody” is the id of the tbody. “.newProjectTask” is the class of the s.

// make the table sortable;
$("#newTaskBody").sortable({
    stop: function() {
        var counter = 0;
        $.each(".newProjectTask", function() {
            console.log(this.id);
            if(counter == 0)
            {
                $(this).removeClass("even odd");
                $(this).addClass("even");
                counter = 1;
            }
            else
            {
                $(this).removeClass("even odd");
                $(this).addClass("odd");
                counter = 0;
            }
        });
    }
});

the console.log(this.id); returns undefined 15 times although I’m testing with 4 rows. I’ve tried ‘stop’, ‘update’ and ‘change’ events.

Answer 1

You are pass string i.e. ".newProjectTask" instead of elements having class newProjectTask to each function. Each iteration gives you character of the string,To see whats happening what going on check this demo

Change

$.each(".newProjectTask", function() {

To

$.each($(".newProjectTask"), function() {

This is how you will get the elements by each

Live Demo

<div id="div1" class="newProjectTask" > div1 </div>
<div id="div1"  class="newProjectTask" > div2 </div>
<div id="div1"  class="newProjectTask" > div3 </div>


​$.each($(".newProjectTask"), function() {
    alert(this.id)
})

Its better to use other version of each i.e. $('.newProjectTask').each( instead on one you used.​

$(".newProjectTask").each( function() {
    alert(this.id)
})