confusion in jquery parents selector with hasClass function

Question

var allChecked = $('.inboxCheckbox:checked');

if(allChecked.length > 0){
    var messageIds = new Array();
    var parentRow = null;
    allChecked.each(
        function(){
            parentRow = $(this).parents('tr'); 
            if(!(parentRow.hasClass('gradeA'))){
                parentRow.addClass('gradeA');
                increaseUnreadMessage();
            }
            parentRow = null;
            messageIds.push($(this).val());
        }
    );

}else{
    showInsMessage('<b class="redTxt">Please Select At Least One Message</b>');
}

i have multiple rows with once checkbox in each row... i was trying to add class gradeA to each row if checkbox is checked.... i do not want to call addClass if it already has class gradeA.... when i select multiple rows then it adds class to only one row. does that mean

lets say i have three rows with checkbox in each row and i select each checkbox when i run $(':checked').each( $(this).parents('tr') ) does it select all the rows with checked boxes or only the specfic parent row.... my assuption was it only gives the specific parent row..... if it gives specific row then it should work .. but once i add a class to parent row and move to another row then parentRow.hasClass('gradeA') return true... i am confused now if it checks all the row with checkboxes then is there any way to select specific parent row......

Thanks for reading

Answer 1

Would be nice to see the markup, are there more tables nested?

However,

parentRow = $(this).closest('tr'); 

should be a better choice.

Answer 2

API says that .parents() method search through all ancestors of the elements. .parent() travels only a single level up the DOM tree. If your checkbox is a direct child (not a deep descendant) of 'tr' then you can try

parentRow = $(this).parent('tr');

Answer 3

BTW, I think you can do it more jQuerish style :

var messageIds = [];

$('tr.youTrs').toggleClass('gradeA', function () {
    var checkbox = $(this).find('.inboxCheckbox');
    if (checkbox.is(':checked')){
        messageIds.push(checkbox.val());
        return true;
    }
    else{
        showInsMessage('<b class="redTxt">Please Select At Least One Message</b>');
        return false;
    }
});

Answer 4

Your code should work. I suspect that the problem is happening because your function increaseUnreadMessage() is throwing an error, which is causing the rest of the each() loop to be skipped.

---

But, to answer your specific question: yes, you can select all rows ( <td> s) that contain checked checkboxes. Using jquery's :has selector , like this:

var allCheckedRows = $('tr:has(.inboxCheckbox:checked)');

from there, of course, you can just use addClass() to apply your classname to all of them:

allCheckedRows.addClass('gradeA');

---

of course, you've got other things going on in your each() loop, so you probably can't throw out the each() entirely. As I said above, your code works... but something like this might be cleaner, and easier to understand.

var messageIds = new Array();

var allCheckedRows = $('tr:has(.inboxCheckbox:checked)');
allCheckedRows.addClass('gradeA');
allCheckedRows.find('.inboxCheckbox').each( function() {
   var cb = $(this);
   increaseUnreadMessage();
   messageIds.push( cb.val() );
});

if( messageIds.length === 0 ) {
   showInsMessage('<b class="redTxt">Please Select At Least One Message</b>');
}