找到距离“最近”的元素

问题描述

我想向作为已知 dom 元素的子元素的元素添加一个类，该元素低于我在元素树上的“路径”之后的一个级别。所以在这种情况下，我想定位 -- any-child-class***

除了“start-here-class”和“closest-class”之外，我无法控制任何标记。包括不知道目标班级在“最近班级”中的位置或“从这里开始班级”的深度（因此“计数”对我的想法不起作用。

            <animal  type="dog" name="Fido" age="2">Fido is a good  dog.</animal>
            <animal  type="dog" name="Ralph" age="1">Ralph is  brown.</animal>
            <animal  type="dog" name="Brian" age="1">Brian is  Ralph's brother.</animal>
            <animal  type="cat" name="Charlie" age="3">Charlie  likes fish.</animal>
          <animal type="rabit" name="Gulper" age="3">Gulper does  not want to be eaten.</animal>
 <animal  type="turtle" name="Caroline" age="5"> Caroline is a turtle </animal>
    </animals>

JS：

<div class="closest-class"> <div class="any-child-class"> <div class="any-child-class"> <div class="any-child-class***">add a class to ONLY me! <div class="more-levels-class"> <div class="more-levels-class"> <div class="more-levels-class"> <div class="start-here-class"> <div class="any-child-class"> <div class="any-child-class">

如何下​​一级？

解决方法

使用 eq 查找 div 以在 closest 的帮助下添加类。

$(".start-here-class").closest(".closest-class").find("div").eq(3).addClass("customclass");

.customclass {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="closest-class">1
  <div class="any-child-class">1
    <div class="any-child-class">1
      <div class="any-child-class customclass">add a class to ONLY me!
        <div class="more-levels-class">
          <div class="more-levels-class">
            <div class="more-levels-class">
              <div class="start-here-class">
                <div class="any-child-class">
                  <div class="any-child-class">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

或使用 class 查找 div。

$(".start-here-class").closest(".closest-class").find(".any-child-class1").addClass("customclass");

.customclass {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="closest-class">1
  <div class="any-child-class">1
    <div class="any-child-class">1
      <div class="any-child-class1">add a class to ONLY me!
        <div class="more-levels-class">
          <div class="more-levels-class">
            <div class="more-levels-class">
              <div class="start-here-class">
                <div class="any-child-class">
                  <div class="any-child-class">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

,

在最接近的地方，您可以指定要应用如下样式的类名。 $(".start-here-class").closest(".closest-class .any-child-class-apply").css('color','red');

$(".start-here-class").closest(".closest-class .any-child-class-apply").css('color','red');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="closest-class">
    <div class="any-child-class">test
    <div class="any-child-class">test1
    <div class="any-child-class-apply">add a class to ONLY me!
        <div class="more-levels-class">
            <div class="more-levels-class">
                <div class="more-levels-class">
                    <div class="start-here-class">
                      <div class="any-child-class">
                        <div class="any-child-class">
                        </div></div></div></div></div></div></div></div></div></div>