Necesito crear una barra de búsqueda para una línea de tiempo extraña (sistema javaEE heredado). Está en javascript, tengo una barra de búsqueda de entrada y ejecuta la función cuando se presiona enter (e.keycode == 13).
Todos los divs que deberían estar en la búsqueda son de la misma clase en la línea de tiempo, sin embargo, la posición de inicio (índice) de la línea de tiempo es una clase diferente de las demás, solo debo considerar a partir de esta división en adelante. Necesito saber cómo puedo indexar todos esos divs (element.querySelectorAll()?) y cómo puedo ignorar los que se colocan antes del índice (el div con la clase diferente)
Es más fácil de entender con esta impresión. Hice una imagen con el código porque no puedo extraerlo y copiarlo debido a la estructura del servidor javaEE, también se explica en la imagen.
Use el combinador general de hermanos :
var divs = document.querySelectorAll('div.marker.active ~ div.marker'); Esto seleccionará todos los elementos div.marker ( <div class="marker"> ) que siguen a un elemento div.marker.active ( <div class="marker active"> )
Si desea usar los nodos en la lista filtrada para algo, podría hacer algo como esto, por ejemplo:
const nodeList = Array.from(document.querySelectorAll('div.marker')) const findIndex = (arr) => { for (let i = 0; i < arr.length; i++) { if (arr[i].className === 'marker active') { return i } } } const startIndex = findIndex(nodeList) const searchIndex = (list, index) => { let searchArray = [] for (let i = index; i < list.length; i++) { searchArray.push({searchContent: nodeList[i].innerText}) } return searchArray } console.log(searchIndex(nodeList, startIndex)) <div class="marker">content div 1</div> <div class="marker">content div 2</div> <div class="marker">content div 3</div> <div class="marker">content div 4</div> <div class="marker">content div 5</div> <div class="marker">content div 6</div> <div class="marker active">div 7 --- search starts here</div> <div class="marker">content div 8</div> <div class="marker">content div 9</div> <div class="marker">content div 10</div> <div class="marker">content div 11</div> <div class="marker">content div 12</div> <div class="marker">content div 13</div>Producción:
[ { "searchContent": "content div 13" }, { "searchContent": "content div 12" }, { "searchContent": "content div 11" }, { "searchContent": "content div 10" }, { "searchContent": "content div 9" }, { "searchContent": "content div 8" }, { "searchContent": "div 7 --- search starts here" } ]