1

This should be a fairly simple process but I'm having the most difficult time with it. I had to find a set of elements. So I had to dig through an element that contain a child element which then contain another child element that has the array of items I need to do stuff with. I was able to console out the final array but have trouble getting the length of it.

This is what it looks like in the console

console.log(angular.element(element[0].children[0])[0].children);
console.log(angular.element(element[0].children[0])[0].children.length);

var myArray = angular.element(element[0].children[0])[0].children;

for(var i = 0; i < myArray.length; i++){
    console.log(i + " object found");
  }

So pretty much my for loop isn't getting anything. Obviously because the length is 0 when it should be 3. Can someone tell me if I'm going crazy or not.

UPDATE

Heres a Plunker if you guys wanna check it out. Everything is already set. Just go into the developer tool on your browser. The only difference I did was added a few extra elements. So instead of 3 I made 5. And I also added a couple of more methods. Specifically targeting an ID. But still no luck implementing it into a for loop.

Victor Le
  • 1,758
  • 3
  • 17
  • 25
  • Can you reproduce this on a plunker and include your html so we can see if anything is wrong? – Matt Lishman May 13 '16 at 11:09
  • P.S using `angular.element(element[0].children[0])[0].children` seems like an overly complicated way to find an element. Why not use a class or id? – Matt Lishman May 13 '16 at 11:10
  • The code works https://jsfiddle.net/v8yru7g2/ so it must be your html. – sheeldotme May 13 '16 at 11:11
  • @mattlishman I added a plunker link. Matt you told me something about finding the element with the specific ID. I'm still new to angular. Do you know how i would go about that? – Victor Le May 13 '16 at 12:11
  • @sheeldotme plunkr been added – Victor Le May 13 '16 at 12:11
  • Just FYI i believe `myArray` will not be an actual array inheriting from the array's prototype but an array like object. – ste2425 May 13 '16 at 12:13
  • @VietLe [This question](http://stackoverflow.com/questions/17230242/angular-element-vs-document-getelementbyid-or-jquery-selector-with-spin-busy-c) should help with that. It's essentially either jQuery or jqLite. Swap your code to use that instead, that will make it far easier to read and for someone to help you. – Matt Lishman May 13 '16 at 12:15
  • @mattlishman Hey i'm sorry to bother you again man. I did three different types of method on the plunkr and still no luck trying to get my array in a for loop. I saved the methods that I tried, can you check the plunker and see exactly what I'm doing wrong? – Victor Le May 13 '16 at 12:43
  • @VietLe What are you actually attempting to do in the loop though? Does it need to be in the directives `link` function? i.e what is your "array of items I need to do stuff with" – Matt Lishman May 13 '16 at 13:07
  • You see how my codeblock doesn't get that certain theme when its output outside of the editor. I'm going to loop through every element that has a "code" element and use Prism.highlightElement() to highlight it. I was able to do this with a hardcoded html block easily since i had to go through 1 children. In this case I had to use ng-bind which added another element that wraps around it. Which is why i needed to get the childrens inside that first children lol – Victor Le May 13 '16 at 13:26

1 Answers1

1

Logging element[0].innerHTML gives :

<div class="ng-binding" ng-bind-html="renderHtml(content)"></div>

Your div is empty (doesn't have #mynewid and children) because at the time you are requesting them, the elements are not yet created by the renderHtml(content) function.

Example:

setTimeout(function() {
    var myArray = document.getElementById("mynewid").children;
    for(var i = 0; i < myArray.length; i++){
        console.log(myArray[i] + " object found");
    }
}, 1000);
PinkTurtle
  • 6,942
  • 3
  • 25
  • 44