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

Question

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

Sorry, but what exactly is the difference between the DIV and the UL version? If you say you knew how to do it for the latter, are you referring to any angular-specific methods that only exist for UL elements, or anything like that? — 04FS, Feb 15 '19 at 13:28
https://stackoverflow.com/questions/13658021/jquery-index-in-vanilla-javascript — Pete, Feb 15 '19 at 14:39

score 2 · Answer 1 · answered Feb 15 '19 at 13:30

2

You can use querySelector to get elements by their attribute values like this:

// if you want the item with data-id=2
document.querySelector("[data-id='2']")

Check this for a working example

answered Feb 15 '19 at 13:30

Haris Bouchlis

2,366
1
20
35

This is not the "Angular" way. – Bardr Feb 15 '19 at 13:34
he asked *How can I do this in vanilla javascript (not using jQuery)?* – Haris Bouchlis Feb 15 '19 at 13:34
*I am building an __Angular__ 7 app* I think that he wants to build *__Angular__ app* in *__Angular__ way*. – Bardr Feb 15 '19 at 13:39

score 1 · Accepted Answer · answered Feb 15 '19 at 13:29

1

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.

answered Feb 15 '19 at 13:29

This is not the "Angular" way. – Bardr Feb 15 '19 at 13:34
@Bardr `How can I do this in vanilla javascript (not using jQuery)?`, and in my answer, `For Angular, it's completely different. Provide a sandbox and your actual code, because there is several options to do that in the framework.`. At some point, you gotta learn to read. – Feb 15 '19 at 14:00

Mamun · Answer 3 · 2019-02-15T13:47:39.283

I want to get the "index" or row of a certain div within a parent div.

You can try the following way:

function getIndex(dId){
  var list = [].slice.call(document.querySelectorAll('.container .item'));
  var idx = list.map(function(el, i){
              var d = el.getAttribute('data-id');
              if(d == dId)
                return i;
            }).filter(i => i != undefined);  
  return idx;
}
console.log(getIndex("1"));
console.log(getIndex("2"));
console.log(getIndex("3"));

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

Bardr · Answer 4 · 2019-02-15T13:58:12.463

-1

Did you mean something like this? Use ViewChild directive to get the container, then use childNodes property of this element to get children nodes. From that you can get everything you want about child node (eg. data-id attribute value).

edited Feb 15 '19 at 13:58

answered Feb 15 '19 at 13:32

Bardr

2,319
2
12
21

This is not the proper Angular way. – Feb 15 '19 at 14:01
`@ViewChildren` for several divs. If he has 700 divs, `@ViewChild` isn't maintainable. – Feb 15 '19 at 14:04
@trichetriche Using `@ViewChild` I'm getting only the container. Not all child nodes. – Bardr Feb 15 '19 at 14:07
And you use vanillaJS to request the children. You shouldn't touch the DOM yourself with Angular, but rather use the renderer and element references to query your elements. – Feb 15 '19 at 14:08
As you see I'm using `ViewChild` directive to get the container (not `document`). Also, as long as I'm only reading from `ElementRef` there is nothing wrong about it. See https://stackoverflow.com/questions/49654783/how-can-i-set-the-value-of-a-native-element-in-angular-using-renderer2/49655041#comment95949999_49655041 – Bardr Feb 15 '19 at 14:14

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

4 Answers4