# Find element in DOM

**URL:** <https://discuss.emberjs.com/t/find-element-in-dom/15083>\
**Category:** Questions\
**Created:** [July 6, 2018, 8:57am UTC](https://discuss.emberjs.com/t/find-element-in-dom/15083 "2018-07-06T08:57:56Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Nitram](https://avatars.discourse-cdn.com/v4/letter/n/5fc32e/32.png) [@Nitram](https://discuss.emberjs.com/u/Nitram)\
**Post date:** [July 6, 2018, 8:57am UTC](https://discuss.emberjs.com/t/find-element-in-dom/15083/1 "2018-07-06T08:57:56Z")

</div>

Hi,

I want to get name and width in px (element) of differents elements when they are created. I use `Ember.run` and “afterRender” for this, but I would like to use something else of jQuery

This is my code :

```
//controllers/build.js
    Ember.run.schedule('afterRender', this, () => {
          let columnsModelAttribution = Ember.A([]);
          let modelAttributionDiv = Ember.$(".containers-parent .report-container");

          if(modelAttributionDiv.length > 0){
            modelAttributionDiv.each((index) => {
              let name = 'example';

              columnsModelAttribution.pushObject({name: name, 'width': Ember.$(modelAttributionDiv[index]).outerWidth()});
            });
          }
        });
      }).on('init'),

```

I have too access to the object who help me to create element. Do you have any ideas ?

Thanks a lot

---

<div class="post-metadata">

**Author:** ![CezaryH](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/cezaryh/32/13527_2.png) [@CezaryH](https://discuss.emberjs.com/u/CezaryH)\
**Post date:** [July 6, 2018, 11:09am UTC](https://discuss.emberjs.com/t/find-element-in-dom/15083/2 "2018-07-06T11:09:04Z")

</div>

Not sure if I understand your issue correctly, If you want access to build controller just use “this”

---

<div class="post-metadata">

**Author:** ![Nitram](https://avatars.discourse-cdn.com/v4/letter/n/5fc32e/32.png) [@Nitram](https://discuss.emberjs.com/u/Nitram)\
**Post date:** [July 6, 2018, 12:39pm UTC](https://discuss.emberjs.com/t/find-element-in-dom/15083/3 "2018-07-06T12:39:33Z")

</div>

Sorry, this is not very understable for you…

In my controller (build.js), I have an observer on “elements.”. When a new item is add in **elements** , my observer works. This observer add item in the template. I add Ember.run, because, I can’t have access of the item add in the template at the end of this observer. But in my Ember.run, I want two things :

- The width of the item who be add on the template (in jQuery i think)
- The ID of this item (in object accessible in the observer)

Do you know a method for make a each on all items add on the template (width an object) and find the item with my object in the DOM.

I hope i am clear

---

<div class="post-metadata">

**Author:** ![ef4](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/ef4/32/13470_2.png) [@ef4](https://discuss.emberjs.com/u/ef4)\
**Post date:** [July 6, 2018, 2:49pm UTC](https://discuss.emberjs.com/t/find-element-in-dom/15083/4 "2018-07-06T14:49:38Z")

</div>

> [@Nitram](#):
>
> I want two things :
> 
> - The width of the item who be add on the template (in jQuery i think)
> - The ID of this item (in object accessible in the observer)

Controllers don’t have direct access to the DOM, that is what Components are for. So I would suggest moving some of your logic down into components. A component could render your list of things:

```auto
{{#each elements as |child|}}
  <div class="child" data-id={{child.id}}>{{child.whatever}}</div>
{{/each}}

```

And then read out their widths and ids together like:

```js
let widths = [...this.element.querySelector('.child')].map(element => ({ 
  width: element.getBoundingClientRect().width,
  id: element.dataset['id']
});

```

Also:

> [@Nitram](#):
>
> In my controller (build.js), I have an observer on “elements.”. When a new item is add in **elements** , my observer works. This observer add item in the template

This sounds like you’re manually trying to do what would happen automatically if you use an `each` in your template. No observers should be needed for this kind of thing, and they’re hard to use without introducing bugs.

You have two choices for automatically rerendering a list. You can use a native array and replace the whole array each time you want different items in the list, like

```auto
this.set('elements', this.elements.concat([newItem]))

```

Or you can use an Ember Array and use its pushObject method, which will automatically be observable by templates:

```auto
import { A } from '@ember/array';

// when creating the array
let elements = A();

// when updating the array
elements.pushObject(newItem);

```

---

<div class="post-metadata">

**Author:** ![ef4](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/ef4/32/13470_2.png) [@ef4](https://discuss.emberjs.com/u/ef4)\
**Post date:** [July 6, 2018, 2:51pm UTC](https://discuss.emberjs.com/t/find-element-in-dom/15083/5 "2018-07-06T14:51:53Z")

</div>

One other idea: the liquid-measured component in liquid-fire is an example of a component that exists to measure its own size. You could use it, or you could just look at how it works to get ideas:

> <https://github.com/ember-animation/liquid-fire/blob/fc3cec4e502875f31fa405226b38f8aa2214dce8/addon/components/liquid-measured.js>