Jquery递归更新元素类

Jquery recursive update element class

本文关键字：元素 更新 递归 Jquery      更新时间：2023-09-26

我需要一个函数来更新div的类。我希望每个节点上的秩增加1。最好用这个例子来解释我的需求:

我有一些div如下:

<div id="content">
  <div id="1" class="rank2">
    <div id="2" class="rank4">
      <div id="3" class="rank7">
      </div>
    </div>
    <div id="3" class="rank4">
    </div>
  </div>
  <div id="4" class="rank2">
  </div>
  <div id="5" class="rank2">
  </div>
</div>

我想要一个函数来更新每一个排名，像这样:

<div id="content">
  <div id="1" class="rank1">
    <div id="2" class="rank2">
      <div id="3" class="rank3">
      </div>
    </div>
    <div id="3" class="rank2">
    </div>
  </div>
  <div id="4" class="rank1">
  </div>
  <div id="5" class="rank1">
  </div>
</div>

因此每个嵌套的div的秩增加1。

My try by far:

var rank = 1;
function initRank() {
  $.each($("#content").find($(".rank"+rank)), function() {
    if (rank >= 2 && $(this).parents(".rank"+(rank-1).length <= 0 )) {
      $(this).removeClass("rank"+rank).addClass("rank"+(rank-1));
      rank--;
      initRank();
    }
  })
  rank++;
  if (rank < 10) {
    initRank();
  } else {
    return; 
  }
}

和Live Demo

如果你不怕递归，这里是你的演示的修改版本:https://jsfiddle.net/qo8s7xzy/3/

我使用regexp来检查现有的类，如果你想使用双位数排名，你必须改进它

.replace(/rank'd/g, "rank"+rank)

它将与div之间的其他元素一起工作，这可能是你想要的，也可能不是。

相关文章：