javascript - 当外部div和内部div具有相同的类时想要删除内部div的类

Question

<div class="test">
  <div class="test">
    <div class="test">
       Test Content
    </div>
  </div>
</div>

我想删除内部div的类测试。我可以用下面的代码来做到这一点，但寻找更通用的 n 级方法。请指导我实现这一目标的正确方法。

<script>
  $(document).ready(function(){
    // this will delete class test of level 1
    $($(".test")[1]).removeClass('test');
    //or
    // this will delete class test of level 2
    $($(".test")[2]).removeClass('test');
  });
</script>

Fiddle

Updated Fiddle仍然无法工作。

谢谢

Answer 1

这应该有效:

$(function() {
  $("div.test > div.test").removeClass("test");
});

它获取一个带有 test 类的 div，它是另一个带有 test 类的 div 的直接后代，并删除它的类。

您还可以将其设为函数:

function removeDuplicateClass(cls) {
    return $("div." + cls + " > div." + cls).removeClass(cls).length;
}

编辑:看到编辑后，这应该可以工作

function removeDuplicateClass(cls, level) {
  // get all top level divs with that class
  var parent = $("div." + cls).filter(function () {
    return !$(this).parent().is("div." + cls);
  });

  // build selector
  var selector = [];
  for (var i = 0; i < level; ++i) {
    selector.push("> div." + cls);
  }

  // now remove class
  return $(selector.join(" "), parent).removeClass(cls).length;
}