CODEWITHSUNDEEP
javascriptjquery
isaapm
isaapm

Reputation: 157

jquery each loop only looping once and if using else code stops

I've got two problems with the following javascript and jquery code. The jquery each loop only iterates once, it gets the first element with the right ID does what it needs to do and stops.

The second problems is that when I use the else in the code the one inside the each function, it doesn't even tries the next if, it just exits there. I'm probably doing something fundamental wrong, but from the jquery each function and what I'd expect from an else, I don't see it.

Javascript code:

var $checkVal;
var $checkFailed;

$("#compliance").live("keypress", function (e) {

 if (e.which == 10 || e.which == 13) {
    var checkID = $(this).parents('td').next().attr('id');
    var checkVal = $(this).val();
    $('#' + checkID).each(function () {
        var cellVal = $(this).text();
        if (checkVal == cellVal) {
            $(this).removeClass("compFail").addClass("compOk");
        } else {
            $(this).removeClass("compOk").addClass("compFail");
            var checkFailed = True;
        }
    });
    if (checkFailed == 'True') {
        (this).addClass("compFail");
    } else {
        (this).addClass("compOk");
    }
 }
});

How could I get the each loop to iterate through all instances of each element with the id assigned to the variable checkID, and get the code to continue after the else, so it can do the last if?

Upvotes: 1

Views: 4453

Answers (3)

Mike C.
Mike C.

Reputation: 3114

This is to illustrate what I'm talking about in my comment, so that you do not remove the wrong var:

var checkVal;
var checkFailed;

$("#compliance").live("keypress", function (e) {

 if (e.which == 10 || e.which == 13) {
    var checkID = $(this).parents('td').next().attr('id');
    //HERE is the first edit
    checkVal = $(this).val();
    $('#' + checkID).each(function () {
        var cellVal = $(this).text();
        if (checkVal == cellVal) {
            $(this).removeClass("compFail").addClass("compOk");
        } else {
            $(this).removeClass("compOk").addClass("compFail");
            //HERE is the second
            checkFailed = True;
        }
    });
    if (checkFailed == 'True') {
        (this).addClass("compFail");
    } else {
        (this).addClass("compOk");
    }
 }
});

Normally, the way you have it would cause a compile-time error (in a typed language like C#) for redeclaring a variable. Here, it's not clear to me if it will be used as a local variable (ignoring your global variable) or if javascript will combine them and consider them the same. Either way, you should use it as I have shown so that your intent is more clear.

EDIT: I have removed the $ from your variables (var $checkVal) as on jsFiddle it was causing issues. SO if you do not need those $'s, then remove them. Also, note that testing on jsFiddle indicates that you do not need to change your code (other than possibly removing the $ from your declaration) as javascript appears to consider them the same variable, despite the redeclaration, which I find a bit suprising tbh.

Upvotes: 1

Jon Cram
Jon Cram

Reputation: 17309

The jquery each loop only iterates once, it gets the first element with the right ID does what it needs to do and stops.

Yes, this is absolutely right for the code you're using:

$('#' + checkID).each(function(){};)

ID attributes are unique. There must be only one element with a given ID in the DOM. Your selector can match only one element. You are iterating over a collection containing just 1 item.

Upvotes: 1

benzonico
benzonico

Reputation: 10833

An id should appear on a page only once. If you want to have multiple elements with same id, then use a class, not an id.

Your each loop iter only once because you are selecting by id thus you are selecting only one element in the page. If you change you elements to a class it should work like you expect.

Upvotes: 4

Related Questions