Cannot access element using jQuery

Question

I have a tbody, which includes 5 rows(for example), when I tried to count number of rows using the following code I received an error:

var count = $(".grid-row").length
undefined
count
0

Then, I tried ready() and received the following:

$(".grid-row").ready(function() {    console.log( "ready!" );}); 
// ready!

init [prevObject: init(1), context: document, selector: ".grid-row"]

Only When I clicked on 2-5 row in the element's tab in Chrome, I could access all 5 rows:

$(".grid-row").ready(function() {    console.log( "ready!" );});
// VM1565:1 ready!
// init(5) [tr.grid-row.even, tr.grid-row.odd, tr.grid-row.even, tr.grid-row.odd, tr.grid-row.even, prevObject: init(1), context: document, selector: ".grid-row"]

What I should do in this case in order to count all rows? Thanks.

The code and printouts you listed are not clear at all, can you edit your question so we can actually understand? — Amit, Aug 07 '18 at 13:17
The table is on the DOM when u execute the event? Give us more information please — Jordi Jordi, Aug 07 '18 at 13:18
try $(document).ready(function(){ console.log($(".grid-row").length);}) if it's in the DOM the table must works — Jordi Jordi, Aug 07 '18 at 13:19
I think DOM elements is not loadded: let tr = document.getElementsByTagName('tr'); undefined tr HTMLCollection [], how can i loaded before counting rows? — Valeria Sheiko, Aug 07 '18 at 13:37
@JordiJordi I have already tried it, but only 1st row out of 5 is presented, how can i loaded another row? — Valeria Sheiko, Aug 07 '18 at 13:41

Steven Spungin · Answer 1 · 2018-08-07T14:17:21.147

0

Put your query in document.ready

$( document ).ready(function() {
    var count = $(".grid-row").length
});

Also, make sure the class name is on the TR element and not the TABLE element.

edited Aug 07 '18 at 14:17

answered Aug 07 '18 at 13:20

Steven Spungin

27,002
5
88
78

I have already tried it, bot only 1 row out of 5 is on DOM, how can i loaded another rows? – Valeria Sheiko Aug 07 '18 at 13:44
Please post your generated HTML table. Are your sure all rows have that class name assigned? – Steven Spungin Aug 07 '18 at 13:47
You can also wrap in a setTimout( () => { var count = $(".grid-row").length }, 2000) to determine if this a loading order issue. – Steven Spungin Aug 07 '18 at 13:49
I tried timeout, it does not work, rows have such class:"grid-row even" or "grid-row odd", so i use only "grid-row" – Valeria Sheiko Aug 07 '18 at 14:06
what happens when you do $("tr").length? – Steven Spungin Aug 07 '18 at 14:08
or document.querySelectorAll('tr').length? – Steven Spungin Aug 07 '18 at 14:11
$("tr").length 6 – Valeria Sheiko Aug 07 '18 at 14:12
Thank, you it works, but why it does not work with class? – Valeria Sheiko Aug 07 '18 at 14:14
Please post generated HTML then. It sounds like the class name is on wrong element or not set to correct value. Is it on the table or TD? – Steven Spungin Aug 07 '18 at 14:15
sorry, i reload page, and received the same issue: var x = $("tr").length; undefined x 0 – Valeria Sheiko Aug 07 '18 at 14:19
Is your table static, or are you generating it via JS? – Steven Spungin Aug 07 '18 at 14:25

Cannot access element using jQuery

1 Answers1