个人中心
gpt4 book ai didi

javascript - 检查哪个元素在另一个元素之前的函数

转载 作者：行者123 更新时间：2023-11-30 09:28:23 25 4
gpt4 key购买 nike

我如何创建一个将 2 个元素作为参数并返回前一个元素的函数(更多内容在 HTML 代码中)？

例如，在这样的文档中:

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <h1 id="title"></h1>
    <h1 id="subtitle"></h1>
    <div>
      <span></span>
    </div>
  </body>
</html>

该函数将返回:

  • head在body和head之间；
  • div在div和span之间；
  • h1#title在h1#title和h1#subtitle之间；
  • false 介于 html 和 html 之间。

伪代码示例:

function firstElement(element1, element2) {
  let elementX = false;
  for ( ... ) {
    if ( ... ) {
      elementX = element1;
    } else {
      elementX = element2;
    }
  }
  return elementX;
}

最佳答案

您可以获得所有 Dom 元素，将其放入数组中并检查 IndexOf..

例如..

注意:我已将 all 数组部分放在函数外部，以防您请求大量 DOM 检查，有时它可以放在函数内部。

const first = document.querySelector("[data-pos=first]");
const second = document.querySelector("[data-pos=second]");

const all = Array.from(document.querySelectorAll("*"));

function firstElement(element1, element2) {
  return all.indexOf(element1) < all.indexOf(element2) ?
    element1 : element2;
}


const found = firstElement(second, first);

found.style.backgroundColor = "yellow";
<div>test 1</div>
<div>test 2</div>
<div>test 3</div>
<div>test 4</div>
<div data-pos="first">test 5</div>
<div>test 6</div>
<div>test 7</div>
<div>test 8</div>
<div>test 9</div>
<div data-pos="second">test 10</div>
<div>test 11</div>
<div>test 12</div>

关于javascript - 检查哪个元素在另一个元素之前的函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47904411/

25 4 0
文章推荐： javascript - 对对象数组进行排序不起作用
文章推荐： javascript - 匿名函数打印为字符串
文章推荐： javascript - image.complete 总是返回真
文章推荐： machine-learning - 为什么梯度检查反向传播速度很慢？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com