如何按顺序获取通过 translate3d 放置的元素

Question

我正在构建一个 Chrome 扩展，它与我的 Youtube 后端屏幕上可见的 Youtube 评论进行交互。我想要扩展 遍历评论列表 并像这样一一突出显示它们：

我通过以下方式获取屏幕上的评论：

return document.querySelectorAll(".ytcp-comment-thread .style-scope.ytcp-comments-section #comment")[currentIndex]

然后维护 currentIndex 以了解我当前处于哪个元素。

这适用于前几条评论，但随后它开始突出显示错误的评论。检查页面后，我注意到评论 divs 的顺序并不完全代表屏幕上评论的顺序。相反，它们似乎是由一个名为 translate3d:

的属性放置的

如何在屏幕上准确遍历所有这些评论？

编辑：这里是 Youtube 如何将页面的最后评论（延迟加载）放在 HTML 元素顶部的示例：

作为代码：

<div class="ytcp-comment-thread style-scope ytcp-comments-section" style="transform: translate3d(0px, 11596px, 0px);">

<div class="ytcp-comment-thread style-scope ytcp-comments-section" style="transform: translate3d(0px, 11800px, 0px);">

<div class="ytcp-comment-thread style-scope ytcp-comments-section" style="transform: translate3d(0px, 12004px, 0px);">

<div class="style-scope ytcp-comments-section" style="transform: translate3d(0px, 12208px, 0px);">

<div class="ytcp-comment-thread style-scope ytcp-comments-section" style="transform: translate3d(0px, 980px, 0px);">

<div class="ytcp-comment-thread style-scope ytcp-comments-section" style="transform: translate3d(0px, 1184px, 0px);">

Answer 1

使用给定的代码（这只是较长列表的一部分，因此布局中存在间隙）我们可以根据元素的 y 平移对元素进行排序。

排序后的数组包含 [i, y] 形式的条目，其中 i 是 #items 子项集合中的索引，y 是翻译的 px 值。

为了说明排序已经产生了注释突出显示的顺序，setTimeout 函数依次突出显示它们。这不太可能是您想要做的 - 它只是一个简单的演示：

const items = document.querySelector('#items').children;
let arr = [];
for (let i = 0; i < items.length; i++) {
  arr.push([i, Number(items[i].style.transform.split('translate3d(0px, ')[1].split('px')[0])]);
}
let sortedArr = arr.sort(function(a, b) {
  return a[1] - b[1];
});
let next = 0;
setInterval(function() {
  if (next > 0) {
    items[sortedArr[next - 1][0]].classList.remove('hilite');
  }
  items[sortedArr[next][0]].classList.add('hilite');
  if (next < (arr.length - 1)) next++;
}, 5000);

.hilite {
  background-color: yellow;
}

<div id="items">
  <div class="ytcp-comment-thread style-scope ytcp-comments-section" style="transform: translate3d(0px, 11596px, 0px);">content 11596</div>

  <div class="ytcp-comment-thread style-scope ytcp-comments-section" style="transform: translate3d(0px, 11800px, 0px);">content 11800</div>

  <div class="ytcp-comment-thread style-scope ytcp-comments-section" style="transform: translate3d(0px, 12004px, 0px);">content 12004</div>

  <div class="style-scope ytcp-comments-section" style="transform: translate3d(0px, 12208px, 0px);">content 12208</div>

  <div class="ytcp-comment-thread style-scope ytcp-comments-section" style="transform: translate3d(0px, 980px, 0px);">content 980</div>

  <div class="ytcp-comment-thread style-scope ytcp-comments-section" style="transform: translate3d(0px, 1184px, 0px);">content 1184</div>
</div>

不要忘记向下滚动（很远）以查看突出显示的情况。

如何按顺序获取通过 translate3d 放置的元素

How to get elements in order that are placed via translate3d

javascript

html

css

google-chrome-extension

frontend