如何使用jQuery获取在特定元素之后找到的第一个元素“在DOM中更远的地方”

我正在尝试使用jQuery选择页面上的第一个标题。找到该元素后，我想要在该元素之后找到的第一个图像标记

有很多有用的函数可以在DOM中遍历它们。但是，看起来它们只能找到位于同一父标记或标头同级中的元素

我准备了这个示例，但html可能完全不同：

<img id="img-one" src="random.png" />
<div>
  <h1>Here is the title</h1>
</div>
<div>
  <div>
    <div>
      <img id="img-two" src="random.png" />
    </div>
  </div>
</div>
<div>
  <div>
    <img id="img-three" src="random.png" />
  </div>
</div>

我在这里用$h1找到标题。首先，现在我需要出现在标题之后的第一个img标记，在本例中是img 2

另外：我放置的随机div的嵌套可能完全不同，因此我不能使用.parent.nextdiv。。。，它必须更加通用

我的第一个想法是，可能有一个函数可以全局地为整个DOM中的元素提供索引。在这种情况下，我可以得到h1的索引和所有img标签的索引，然后比较哪一个图像索引更大并且最接近h1的索引

是否有这样的功能，或者是否有我可能错过的其他选择器

---

这里有一个代码笔设置可以使用：

一种方法是抓取标题，然后抓取每个图像标签。 在图像标记上迭代，以查找与标题绝对位置最近的“绝对顶部”位置

---

可能不是最好的方法，但它应该会起作用。

这将处理您的示例：

function getFirstImgAfterH1(h1) {
  var $allH1Img = $("h1, img");
  var h1Index = $allH1Img.index(h1);
  for (var i = h1Index + 1; i < $allH1Img.length; i++) {
    if ($allH1Img[i].tagName === "IMG") {
      return $allH1Img[i];
    }
  }
  return null;
}

您应该注意到，对于选择器和$element，可以像这样使用它：

function getFirstAfter(selector, $element) {
  var selectors = selector + ", " + $element[0].tagName;
  var $allSelectorElement = $(selectors);
  var elementIndex = $allSelectorElement.index($element);
  for (var i = elementIndex + 1; i < $allSelectorElement.length; i++) {
    if ($($allSelectorElement[i]).is(selector)) {
      return $allSelectorElement[i];
    }
  }
  return null;
}

---

为什么不直接使用$img two呢？非常感谢：我知道使用索引可以达到目的，但是我太专注于将索引dom扩展。选择h1和img并确定该数组中的索引非常聪明。

function getFirstAfter(selector, $element) {
  var selectors = selector + ", " + $element[0].tagName;
  var $allSelectorElement = $(selectors);
  var elementIndex = $allSelectorElement.index($element);
  for (var i = elementIndex + 1; i < $allSelectorElement.length; i++) {
    if ($($allSelectorElement[i]).is(selector)) {
      return $allSelectorElement[i];
    }
  }
  return null;
}

getFirstAfter("img", $("h1").first());