我正在構建一個 Chrome 擴展程式，它與我的 Youtube 后端螢屏上可見的 Youtube 評論進行互動。我希望擴展程式遍歷評論串列并像這樣一一突出顯示它們：
我通過以下方式在螢屏上獲得評論：
return document.querySelectorAll(".ytcp-comment-thread .style-scope.ytcp-comments-section #comment")[currentIndex]
然后保持currentIndex了解我目前所處的元素。
這適用于前幾條評論，但隨后它開始突出顯示錯誤的評論。檢查頁面后，我注意到評論div的順序并不完全代表螢屏上評論的順序。相反，它們似乎是由一個名為的屬性放置的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);">
uj5u.com熱心網友回復：
使用給定的代碼（這只是較長串列的一部分，因此布局中存在間隙），我們可以根據元素的 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>不要忘記向下滾動（相當一種方式）以查看突出顯示的情況。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/413021.html
標籤：