Question

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

有很多有用的功能可以遍历DOM。但是，看起来他们只能找到同一个父标记中的元素＆＃34;＆＃34;或者＆＃34;兄弟姐妹＆＃34;标题。

我准备了这个例子，但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标签，即＆＃34; img-two＆＃34;在这个例子中。

另外：我实施的随机div的嵌套可能完全不同，所以我不能使用类似.parent().next("div"). ...的东西，它必须更通用。

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

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

以下是使用的代码集设置：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());

您应该观察到selector和$element可以使用.is()进行推广，如下所示：

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());

Answer 2

执行此操作的方法可以是抓取标题，然后抓取每个图像标记。迭代图像标记以找到最接近的绝对顶部＆＃39;从标题绝对位置开始的位置。

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

如何获得第一个元素＆＃34;进一步在DOM＆＃34;在使用jQuery

2 个答案: