How to index divs with same class and search inside them?

user_14237663 0
Viewed 45

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.

https://i.ibb.co/prXBNNY/Sem-t-tulo.png

javascript
2 Answers

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">)

user_3787790

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"
  }
]
user_98824860
Related