帶有hasClass函數的jQuery父母選擇器中的混淆

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>');
}

我有多行，每行都有一個復選框...如果要選中復選框，我試圖將classA添加到每行中。...如果我已經有classA，我不想調用addClass。選擇多行，然后將類僅添加到一行。 這是否意味着

假設我有三行，每行都有一個復選框，當我運行$(':checked').each( $(this).parents('tr') )時我選擇了每個復選框$(':checked').each( $(this).parents('tr') )是否選擇了所有帶有復選框的行或僅是特定的父行...然后parentRow.hasClass（'gradeA'）返回true ...我現在很困惑，如果它用復選框檢查了所有行，那么有什么辦法選擇特定的父行......

謝謝閱讀

Answer 1

看到標記會很高興，是否還有更多的表格嵌套？

然而，

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

應該是一個更好的選擇。

Answer 2

API表示.parents（）方法可搜索元素的所有祖先。 .parent（）僅在DOM樹上移動單個級別。 如果您的復選框是'tr'的直接子級（不是后代），則可以嘗試

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

Answer 3

順便說一句，我想你可以做更多jQuerish風格：

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

您的代碼應該可以工作。 我懷疑問題正在發生，因為您的函數increaseUnreadMessage()拋出錯誤，這導致其余的each()循環被跳過。

---

但是，要回答您的特定問題：是的，您可以選擇包含選中復選框的所有行（ <td> ）。 使用jquery的：has選擇器 ，如下所示：

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

從那里，當然，您可以只使用addClass()將您的類名應用於所有這些類：

allCheckedRows.addClass('gradeA');

---

當然，您的each()循環中還有其他事情在進行，所以您可能無法完全扔掉each() 。 就像我在上面說的那樣，您的代碼可以工作...但是類似這樣的代碼可能更簡潔，更易於理解。

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>');
}