javascript - jQuery Transverse Up（通过 sibs、parents、grandPs 等）直到找到 Element 的第一个实例

Question

我正在尝试使用 jQuery 遍历 DOM 以找到标签的第一个匹配项。我试过closest, prev, prevAll，但在某些结构情况下它们都失败了。如果p示例中的标记从兄弟姐妹更改为父标记或向上标记，则会失败。所以我总是以p标签为目标。但是，如果您删除p小提琴（）中的标签p tag 1...我想p tag test 2突出显示...如果您删除p tag 2- 我想p tag 3突出显示。我正在寻找一种任意向上的方式。一个不是基于选择器与 sib、parent、grandP 的位置关系，而是基于在所述选择器上方的 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 标签在哪里 up。

$('.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"
  });
}

标签： javascriptjqueryhtml

Answer 1

您可以使用父母（https://api.jquery.com/parents/）。父母遍历 UP 直到遇到通过的选择器。

$("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>