Блог

Я пытаюсь выполнить перемещение вверх по DOM с помощью jQuery, чтобы найти первое совпадение тега. Я пробовал closest , prev , prevAll , но все они терпят неудачу при определенных обстоятельствах структуры. Если p тег в примере изменен с родственного на родительский или выше, произойдет сбой. Поэтому я всегда ориентируюсь на p тег. Но если вы удалите p тег в скрипке ( p tag 1 )… Я хочу p tag test 2 выделить … и если вы удалите p tag 2 — я хочу p tag 3 выделить. Я ищу произвольный способ перемещения вверх. Он основан не на отношении местоположения селектора к sib, parent, grandP, а на первом теге find of p над указанным селектором.

  <div>(great-great-grandparent)
  <div>div (great-grandparent)
    <p>p6</p>
    <div>ul (second ancestor - second grandparent)
      <p>p5</p>
      <div>ul (first ancestor - first grandparent)
        <p>p4</p>
        <div>Wrapper
          <!-- <span>span3</span> -->
          <div>li (direct parent)
            <!-- <p>p2-2</p> -->
            <!-- <p>p2</p> -->
            <label class='one'>label1</label>
            <p>p1</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
  

Пример: https://jsfiddle.net/rooksstrife/04nq37wr/44 /

Все это не выполняется … там, где когда-либо был указан первый тег p.

 $('.one').prevAll('p:first')
$('.one').prev('p')
$('.one').closest('p')
  

Это самое близкое, что я получил, но оно поднимается только на 1 уровень вместо поиска первого p :

 if ($(".one").prevAll("p:first").length == 0) {
  $(".one").closest(":not(.one)*").prevAll("p:first").css({
    "color": "red",
    "border": "2px solid red"
  });
} else {
  $(".one").prevAll("p:first").css({
    "color": "red",
    "border": "2px solid red"
  });
}
  

Вы могли бы использовать parents (https://api.jquery.com/parents /). Родители перемещаются ВВЕРХ, пока не встретят переданный селектор.

 $("span").parents(".ancestors").find("p:first");
  

Другой вариант — использование родителей и первого селектора jQuery (не CSS):

 $(document).ready(() => {
$("span").parents("div").find("p").first().css({
    "color": "red",
    "border": "2px solid red"
  });
});  

 div, p, span * {
  display: block;
  border: 2px solid lightgrey;
  color: lightgrey;
  padding: 5px;
  margin: 15px;
}  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>(great-great-grandparent)
  <div>div (great-grandparent)
    <b>test4</b>
    <div>ul (second ancestor - second grandparent)
      <p>test3</p>
      <div>ul (first ancestor - first grandparent)
        <p>test2</p>
        <div>li (direct parent)
          <p> Test 1</p>
          <span>span</span>
        </div>
      </div>
    </div>
  </div>
</div>