I need to create a search bar for a weird timeline (legacy javaEE system). Its in javascript, i have an input search bar and it runs the function when enter is pressed (e.keycode ==13).
All divs who should be in the search are from the same class in the timeline, however, the starting position (index) of the timeline is a different class from the others, i should only consider from this div on wards. I need to know how can I index all those divs (element.querySelectorAll()?) and how can I ignore those that are placed before the index (the div with the different class)
It's easier to understand with this print. I made a image with the code because I'm failing to extract it and copy due to javaEE server estruture, it's explained in the image too.
Use the general sibling combinator:
var divs = document.querySelectorAll('div.marker.active ~ div.marker');
This will select all div.marker elements (<div class="marker">) which follow a div.marker.active element (<div class="marker active">)
If you want to use the nodes in the filtered list for something you could do something like this, for example:
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>Output:
[
{
"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"
}
]