0
262
ViewsCómo obtener elementos en orden que se colocan a través de translate3d
Estoy creando una extensión de Chrome que interactúa con los comentarios de Youtube visibles en la pantalla de mi backend de Youtube. Quiero que la extensión recorra la lista de comentarios y los resalte uno por uno así:
Me salen los comentarios en pantalla de la siguiente forma:
return document.querySelectorAll(".ytcp-comment-thread .style-scope.ytcp-comments-section #comment")[currentIndex] y luego mantenga currentIndex para saber en qué elemento estoy actualmente.
Esto funciona para los primeros comentarios, pero luego comienza a resaltar el comentario incorrecto. Después de inspeccionar la página, noté que el orden de los comentarios div s no representa exactamente el orden de los comentarios en la pantalla. En cambio, parecen estar colocados por un atributo llamado translate3d :
¿Cómo puedo recorrer con precisión todos estos comentarios en la pantalla?
Editar : aquí hay un ejemplo de cómo Youtube coloca los últimos comentarios de la página (cargados con pereza) en la parte superior de los elementos HTML:
Y como código:
<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);">1 answers
Answer question0
Tomando el código dado (que es solo parte de una lista más larga y, por lo tanto, hay espacios en blanco en el diseño), podemos ordenar los elementos en términos de sus traducciones.
La matriz ordenada tiene entradas de la forma [i, y] donde i es el índice dentro de la colección de elementos secundarios de #items e y es el valor px de la traducción.
Para ilustrar que la clasificación ha producido el orden en que se resaltarán los comentarios, una función setTimeout los resalta a su vez. No es probable que esto sea lo que desea hacer; está aquí solo como una demostración simple:
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>No olvides desplazarte hacia abajo (muy lejos) para ver cómo se resalta.