How to get an element from td array by its class name

Question

I tried using this statement:

$("td", calendar).getElementsByClassName("today")

but I kept getting the error that getElementsByClassName is not a function.

$("td", calendar)

gives back an array of "td"'s. Is it possible to access the "today" "td" only using one line, or is a some kind of iteration necessary?

https://stackoverflow.com/questions/15719222/getelementsbyclassname-vs-jquery — Orelsanpls, Sep 21 '17 at 11:37
@HimanshuUpadhyay why does it matter? It's not relevant in the slightest. — freedomn-m, Sep 21 '17 at 11:41
`$("td", calendar).filter(".today")` the same as `$("td.today", calendar)` and the same as `$(calendar).find("td.today")` (and the .filter version), and, depending on what `calendar` is, you could maybe use `calendar.find("td.today")`, but I'd stick with `$("td.today", calendar)` as it saves having to worry about it. — freedomn-m, Sep 21 '17 at 11:43

lumio · Accepted Answer · 2017-09-21T12:13:59.400

2

jQuery is a wrapper for DOM elements and has its own helper functions.

To filter a collection of elements, use .filter like so:

$( 'td', calendar ).filter( '.today' );

If you are only going to use tds with the today class, then it is better to alter your selector:

$( 'td.today', calendar );

You could achieve this with built in JS functions as well, like this

const tdCollection = document.querySelectorAll( 'td.today' );
console.log( tdCollection );

<table>
  <tr>
    <td>yesterday</td>
    <td class="today">today</td>
    <td>tomorrow</td>
  </tr>
</table>

edited Sep 21 '17 at 12:13

answered Sep 21 '17 at 11:37

lumio

7,428
4
40
56

I used your first suggestion, and it returned an array, so i just added a [0] and it was fixed, thanks. Do you know which method is faster? – Peter Cardenas Sep 21 '17 at 13:08
The last one without jQuery. jQuery itself is just a wrapper which of course relies on built in JS function. I wouldn't recommend using jQuery unless you really need to support older versions of IE - but as far as I know jQuery won't support older versions anyway. Nowadays pretty much everything can be easily done without jQuery. – lumio Sep 21 '17 at 13:11

Apfelbox · Answer 2 · 2017-09-21T11:49:37.583

0

You are mixing vanilla Javascript with jQuery.

Javascript

var x = document.getElementsByClassName("today")

this returns all elements with this classname in an array

jQuery

var x = $('.today');

when selecting an element with jquery you need to prepend a "#" for ids and a "." for classes

good luck and have fun learning javascript :)

[EDIT] Sorry, apparently I over read the real problem here. In your specific case you would best go with a solution similar to what @lumio suggested in his answer.

edited Sep 21 '17 at 11:49

answered Sep 21 '17 at 11:38

Apfelbox

367
4
13

1

I can only imagine this got downvoted (not be me) because it didn't answer the specific case in the question. Maybe add a line and, "in your case, this means use..." – freedomn-m Sep 21 '17 at 11:44

How to get an element from td array by its class name

2 Answers2