I am getting this error in my jQuery selector when I am trying to get my table's all rows' height value in a for loop.

This is the selector I use to traverse all rows of the table:

for (var i = 0; i < myTable.rows.length; i++) {
    var currentRow = $('#table-' + currentGraphOptions.id +' > tbody').children()[i];

    var rowsHeight = currentRow.css('height');
}

The error on the title is as a result of rowsHeight.

This is full error:

Uncaught TypeError: $(...).children(...)[0].css is not a function
at Scope.eval (eval at evaluate (unknown source), <anonymous>:1:65)
at Object.InjectedScript._evaluateOn (<anonymous>:905:55)
at Object.InjectedScript._evaluateAndWrap (<anonymous>:838:34)
at Object.InjectedScript.evaluateOnCallFrame (<anonymous>:964:21)
at Scope.controllers.controller.$scope.saveDashboard (http://localhost:9001/scripts/controllers/DashboardCtrl.js:497:61)
at $parseFunctionCall (http://localhost:9001/bower_ponents/angular/angular.js:12404:18)
at ngEventDirectives.(anonymous function)pile.element.on.callback (http://localhost:9001/bower_ponents/angular/angular.js:21566:17)
at Scope.$get.Scope.$eval (http://localhost:9001/bower_ponents/angular/angular.js:14466:28)
at Scope.$get.Scope.$apply (http://localhost:9001/bower_ponents/angular/angular.js:14565:23)
at HTMLAnchorElement.<anonymous> (http://localhost:9001/bower_ponents/angular/angular.js:21571:23)

I am getting this error in my jQuery selector when I am trying to get my table's all rows' height value in a for loop.

This is the selector I use to traverse all rows of the table:

for (var i = 0; i < myTable.rows.length; i++) {
    var currentRow = $('#table-' + currentGraphOptions.id +' > tbody').children()[i];

    var rowsHeight = currentRow.css('height');
}

The error on the title is as a result of rowsHeight.

This is full error:

Uncaught TypeError: $(...).children(...)[0].css is not a function
at Scope.eval (eval at evaluate (unknown source), <anonymous>:1:65)
at Object.InjectedScript._evaluateOn (<anonymous>:905:55)
at Object.InjectedScript._evaluateAndWrap (<anonymous>:838:34)
at Object.InjectedScript.evaluateOnCallFrame (<anonymous>:964:21)
at Scope.controllers.controller.$scope.saveDashboard (http://localhost:9001/scripts/controllers/DashboardCtrl.js:497:61)
at $parseFunctionCall (http://localhost:9001/bower_ponents/angular/angular.js:12404:18)
at ngEventDirectives.(anonymous function).pile.element.on.callback (http://localhost:9001/bower_ponents/angular/angular.js:21566:17)
at Scope.$get.Scope.$eval (http://localhost:9001/bower_ponents/angular/angular.js:14466:28)
at Scope.$get.Scope.$apply (http://localhost:9001/bower_ponents/angular/angular.js:14565:23)
at HTMLAnchorElement.<anonymous> (http://localhost:9001/bower_ponents/angular/angular.js:21571:23)

• javascript
• jquery
• css

• Try wrapping currentRow in $: var rowsHeight = $(currentRow).css('height'); – Jakub Bilko Commented Aug 21, 2015 at 9:14
• When accessing element from the array jQuery uses to store then you take the pure DOM element so you lose all jQuery methods attach to a jQuery insteance object. – GillesC Commented Aug 21, 2015 at 9:16

2 Answers 2

It's because you are working with DOM node instead of jQuery object. Use .children().eq(i) instead.

You are getting the DOM element from your jQuery object and DOM elements don't have a .css() method.

You may mean to use .eq():

for (var i = 0; i < myTable.rows.length; i++) {
    var currentRow = $('#table-' + currentGraphOptions.id +' > tbody').children().eq(i);
    var rowsHeight = currentRow.css('height');
}