Q:

Get the index of child div in enclosing divs. Not list

I am building an Angular 7 app.
I want to get the "index" or row of a certain div within a parent div.
My markup looks like this:
<div class="container">
  <div class="item" data-id="1" />
  <div class="item" data-id="2" />
  <div class="item" data-id="2" />
  <div class="item" data-id="3" />
</div>

I know I can easily do it if the markup looked like below but I don´t want to use a list if I can avoid it.
<ul class="container">
 <li class="item" data-id="1" />
 <li class="item" data-id="2" />
 <li class="item" data-id="2" />
 <li class="item" data-id="3" />
</ul>

Basically I know the data-id so I want to select that and then get the index belonging to it.
How can I do this in vanilla javascript (not using jQuery)?

A:

Use the querySelector API

const container = document.querySelector('div.container');

const items = [...container.querySelectorAll('div.item')];

console.log(items);
<div class="container">
  <div class="item" />
  <div class="item" />
  <div class="item" />
  <div class="item" />
</div>

For Angular, it's completely different. Provide a sandbox and your actual code, because there is several options to do that in the framework. Until then, I have removed the Angular tag. 

