1

So I'm using jQuery to select some elements in an angular post-link function. Only problem is, jQuery can't find any children.

var tr = tbl.find('> thead > tr');

console.log('th', tr.children('th').length, tr.children().length, tr[0].children);

Output:

What I see in the console

What gives?

EDIT

Here's the HTML essentially

<table my-directive>
  <thead>
    <tr>
      <th sorting-header="foo">foo</th>
      <th sorting-header="foo">foo</th>
      <th sorting-header="foo">foo</th>
      <th sorting-header="foo">foo</th>
      <th sorting-header="foo">foo</th>
      <th sorting-header="foo">foo</th>
      <th sorting-header="foo">foo</th>
    </tr>
  </thead>
  ...
</table>

EDIT 2

I think I'm running into some type of race condition. Like I said I didn't write the original directive, I'm just tweaking it. It seems that when I'm handed the tbl element the table doesn't have the elements in it yet (so I suppose) because a tr[0].innerHTML spits out a bunch of <!-- ngIf: clauses but no elements. I guess this is some spooky race condition.

Thanks for all the help everyone, I'm just going to go about this a different way now I guess.

Skinner927
  • 953
  • 2
  • 13
  • 25
  • 2
    When is your jQuery code running? The elements might not be created yet. (This is exactly why mixing jQuery and AngularJS should be avoided as much as possible.) – Blazemonger Oct 29 '14 at 19:22
  • Then why do they show in the console if I use just javascript? – Skinner927 Oct 29 '14 at 19:22
  • Have you read this? There's probably a better way to accomplish your mission without using jQuery selectors. http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background – isherwood Oct 29 '14 at 19:23
  • @isherwood yes, I need to pull the text() of these elements post-link. Technically, I could setup a directive and a service and all that but I'm modifying existing code and don't want to add all that. – Skinner927 Oct 29 '14 at 19:24
  • Ok, then show us the HTML that the script is acting on (`tbl`). – isherwood Oct 29 '14 at 19:25
  • 1
    I couldn't recreate your error with the information given. http://jsfiddle.net/j8sLn27o/ – Clayton Leis Oct 29 '14 at 19:35
  • @ClaytonLeis indeed, I can only guess that his tbl variable has been declared incorrectly. – Andrew Hoffman Oct 29 '14 at 19:43

3 Answers3

0

Ty using this code to access: 

var rows= $('#element_ID > tbody > tr').length
var columns=$('#element_ID').find('tr')[0].cells.length;
var text =  $($('#element_ID').find('tbody > tr')[rows-1]).children('td')[counter].innerHTML;
Jabel Márquez
  • 772
  • 1
  • 11
  • 38
Jorge Mejia
  • 1,153
  • 1
  • 10
  • 27
0

Sorry to bother everyone, looks like this was a classic race condition.

I decided to barf this to the console

console.log('th', tr.children('th').length, tr.children().length, tr[0].children.length)

and now I get 3 zeroes. So I guess what I was seeing in the console was due to the console watching the nodeList and live updating its changes.

@Blazemonger nailed it.

Skinner927
  • 953
  • 2
  • 13
  • 25
0

try using var tr = tbl.children('thead > tr');

jzap
  • 112
  • 1
  • 4