jquery - 如何使用 jQuery 获取特定元素后找到的第一个元素 "further in the DOM"

Question

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

有很多有用的函数可以遍历 DOM。然而，看起来他们只能找到“在同一父标签中”或“同级” header 的元素。

我准备了这个示例，但 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").first()，现在我需要在该标题之后出现第一个 img 标签，在本例中为“img-two”。

另外:我放置的随机 div 的嵌套可能完全不同，因此我不能使用 .parent().next("div") 之类的东西。 ...，它必须更通用。

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

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

这是一个可以使用的codepen设置:https://codepen.io/anon/pen/zPOjmQ

Answer 1

这可以处理您的示例:

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;
}

用法:

getFirstImgAfterH1($("h1").first());

您应该观察到它可以使用 .is() 推广到 selector 和 $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;
}

用法:

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