查找上一行中的元素並更改類

Question

我使用帶有X-editable的數據表，並在表中包含一些引導按鈕。基本上，如果用戶將可編輯的「狀態」列更新爲「已解決」，我希望前一行中「未驗證」按鈕中的按鈕變成綠色。如果狀態切換回任何其他狀態，它應該變回紅色。

我正在使用Datatables分組函數添加「未驗證」按鈕。

我已經建立了的jsfiddle：http://jsfiddle.net/n74zo0ms/14/

JQuery的：

//initialize the datatable 
$(document).ready(function() { 
    var table = $('#dataTables').DataTable({ 
    "columnDefs": [{ 
     "visible": false, 
     "targets": 0 
    }], 
    "info": false, 
    "searching": false, 
    "drawCallback": function(settings) { 
     setupXedit(); 
     var api = this.api(); 
     var rows = api.rows({ 
     page: 'current' 
     }).nodes(); 
     var last = null; 

     api.column(0, { 
     page: 'current' 
     }).data().each(function(group, i) { 
     if (last !== group) { 
      $(rows).eq(i).before(
      '<tr class="group"><th colspan="2"></i><i class="fa fa-arrow-circle-o-right"></i> Cluster: ' + group + '</th><th colspan="1"><a href="" data-toggle="modal" data-target="" class="btn-sm btn-danger btn-switch" style="display:block;width:99%;text-align:center;"><i class="fa fa-exclamation-triangle fa-switch"></i> Not Validated</a></th></tr>' 
     ); 

      last = group; 
     } 
     }); 
    } 

    }); 
}); 

function setupXedit() { 
    //initialize the editable column 
    $('.status').editable({ 
    url: '/post', 
    pk: 1, 
    source: [{ 
     value: 'New', 
     text: 'New' 
    }, { 
     value: 'In Progress', 
     text: 'In Progress' 
    }, { 
     value: 'Resolved', 
     text: 'Resolved' 
    }], 
    title: 'Example Select', 
    validate: function(value) { 
     var cell = $(this).parent().parent().find(".btn-switch") 
     var cell2 = $(this).parent().parent().find(".fa-switch") 
     if (value == 'Resolved') { 
     cell.removeClass('btn-danger'); 
     cell2.removeClass('fa-exclamation-triangle'); 
     cell.addClass('btn-warning'); 
     cell2.addClass('fa-thumbs-o-down'); 
     } else { 
     cell.removeClass('btn-warning'); 
     cell2.removeClass('fa-thumbs-o-down'); 
     cell.addClass('btn-danger'); 
     cell2.addClass('fa-exclamation-triangle'); 
     }; 

    } 
    }); 
} 

Answer 1

您需要鏈prev()方法分配給你的cell和cell2變量。

正確的分配應該是這樣的：

var cell = $(this).parent().parent().prev().find(".btn-switch"); 
var cell2 = $(this).parent().parent().prev().find(".fa-switch"); 

Updated fiddle