gpt4 book ai didi

javascript - 确定两个元素之间的关系

转载 作者:行者123 更新时间:2023-11-30 08:34:16 25 4
gpt4 key购买 nike

假设我有以下 DOM 元素:

<div>test</div>
<div>test</div>

并且假设我有对每个 div 的引用,但没有对它们的集合的引用。有什么方法可以确定它们之间的关系吗?例如,如果我有 div1div2,有什么方法可以判断 div1 是在之前还是之后(或内部,或其他) div2?

我知道我可以用

var elements = document.querySelectorAll('div');

...当然,elements[0]elements[1] 之前。但是,如果我没有那个元素集合,只有单个引用,有什么方法可以判断吗?

最佳答案

好的,现在你已经说过问题是关于 JavaScript 的,你想知道如何在不使用它们在集合中的位置的情况下“区分”两个 div(querySelectorAll 不返回一个实际的数组,只是一些非常类似于数组的东西)。我能想到的这样做的唯一原因是,如果您没有集合,您只有对两个 div 的引用,并且想知道哪个在文档中排在第一位。

当然,您可以获取 集合,然后在其中查找 div,但您也可以使用 compareDocumentPosition (链接到规范,它可能不是那么清楚;here's the MDN article)。 compareDocumentPosition 告诉您调用它的元素相对于您传递给它的元素的位置:

  • DOCUMENT_POSITION_DISCONNECTED (1)
  • DOCUMENT_POSITION_PRECEDING (2)
  • DOCUMENT_POSITION_FOLLOWING (4)
  • DOCUMENT_POSITION_CONTAINS (8)
  • DOCUMENT_POSITION_CONTAINED_BY (16)
  • DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC (32)

例如:

if (oneDiv.compareDocumentPosition(theOtherDiv) & 2) {
// oneDiv is prior to theOtherDiv in the document order
} else {
// could be any of the others, but if we assume that both
// are actually in the document and that neither contains
// the other, then theOtherDiv is prior to oneDiv
}

例子:

var list = document.querySelectorAll('div');
theoreticalFunction("0, 1", list[0], list[1]);
theoreticalFunction("1, 0", list[1], list[0]);
snippet.log(" "); // Just to move past the divs

function theoreticalFunction(label, oneDiv, theOtherDiv) {
snippet.log(label);
// 2 = "preceding"
if (oneDiv.compareDocumentPosition(theOtherDiv) & 2) {
snippet.log("theOtherDiv is prior to oneDiv in the document order");
} else {
// We're assuming it's following, but of course, there are lots
// of other possible values:
// DOCUMENT_POSITION_DISCONNECTED 1
// DOCUMENT_POSITION_PRECEDING 2
// DOCUMENT_POSITION_FOLLOWING 4
// DOCUMENT_POSITION_CONTAINS 8
// DOCUMENT_POSITION_CONTAINED_BY 16
// DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC 32
snippet.log("oneDiv is prior to theOtherDiv in the document order");
}
}
div {
position: absolute;
top: 0px;
left: 0px;
}
<div>test</div>
<div>test</div>
<p id="spacer"></p>
<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="//tjcrowder.github.io/simple-snippets-console/snippet.js"></script>


当问题似乎是关于 CSS 时的原始答案:

听起来您正试图这样做

  1. 在 CSS 中,以及

  2. 不向元素添加任何其他识别特征

我不相信你可以,除非他们在同一个 parent (或者当然,如果他们中的一个在另一个里面,但这不是你所展示的),或者除非你可以引用他们的 parent /祖先元素(我们不能在答案中,因为问题中没有)。

如果他们在同一个父级,你有两个选择:

如果它们真的如您展示的那样,彼此相邻,您可以使用 adjacent sibling combinator 来区分它们, +:

div + div {
/* Styles for second div */
}

例子:

div {
position: absolute;
top: 0px;
left: 0px;
}
div {
color: blue;
}

div + div {
top: 20px;
color: red;
}
<div>test</div>
<div>test</div>

如果它们实际上并不相邻,您可以使用 general sibling combinator , ~.

div ~ div {
/* Styles for latter div */
}

例子:

div {
position: absolute;
top: 0px;
left: 0px;
}
div {
color: blue;
}

div ~ div {
top: 20px;
color: red;
}
<div>test</div>
<p>Something in-between</p>
<div>test</div>

关于javascript - 确定两个元素之间的关系,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33441192/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com