javascript - 优化 Javascript 代码

Question

我有这个 JavaScript 代码来添加和删除一些类。下面是代码。谁能帮我优化这段代码？

  $(".showTR").click(function () {
    if (!$(this).parent().parent('tr').next('tr').hasClass('Row')) {
        if (!$(this).parent().parent('tr').next('tr').next('tr').hasClass('Row')) {
            if (!$(this).parent().parent('tr').next('tr').next('tr').next('tr').hasClass('Row')) {
                if (!$(this).parent().parent('tr').next('tr').next('tr').next('tr').next('tr').hasClass('Row')) {
                    if (!$(this).parent().parent('tr').next('tr').next('tr').next('tr').next('tr').next('tr').hasClass('Row')) {
                        if (!$(this).parent().parent('tr').next('tr').next('tr').next('tr').next('tr').next('tr').next('tr').hasClass('Row')) {

                        } else {
                            $(this).parent().parent('tr').next('tr').next('tr').next('tr').next('tr').next('tr').next('tr').removeClass('Row')
                            $(this).hide();
                        }
                    }
                    else {
                        $(this).parent().parent('tr').next('tr').next('tr').next('tr').next('tr').next('tr').removeClass('Row');
                    }
                } else {
                    $(this).parent().parent('tr').next('tr').next('tr').next('tr').next('tr').removeClass('Row');
                }

            } else {
                $(this).parent().parent('tr').next('tr').next('tr').next('tr').removeClass('Row');
            }
        } else {
            $(this).parent().parent('tr').next('tr').next('tr').removeClass('Row');
        }
    }
    else {
        $(this).parent().parent('tr').next('tr').removeClass('Row');          
    }

});

代码尝试检测下一个 tr 是否具有 Row 类。如果不是，则转到下一个 tr，如果是，则从下一个 tr 中删除类 Row 然后转到下一个 tr 等等......

Answer 1

由于 HTML 代码不可用，您可以尝试这样的操作:

方法一

• 导航到父 tr，为此您可以使用 .closest('tr') 或 .parents('tr')
• 现在使用 .nextAll('tr')
获取所有下一个 tr 的列表
• 遍历它们并检查每个值。如果它有类，将其删除并更新标志以不影响其他 trs。
• 如果是最后一个tr，也隐藏.showTR

$(".showTR").click(function() {
  var self = this;
  var hasUpdated = false;
  var trs = $(this).parents('tr').nextAll("tr");
  $.each(trs, function(i, tr) {
    if (!hasUpdated) {
      var $tr = $(tr);
      hasUpdated = $tr.hasClass('Row') && $tr.removeClass('Row') && true;
      if (i === trs.length - 1) {
        $(self).hide()
      }
    }
  })
});

---

方法二

• 获取具有类“Row”的父级 tr 的第一个兄弟 tr。
• 从中删除类。
• 如果是最后一个 child ，隐藏.showTR

$(".showTR").click(function() {
  var tr = $(this).parents('tr').next("tr.Row:first");
  if(tr.length){
    tr.removeClass("Row");
    if(tr.is(':last-child'))
      $(this).hide()
  }
});