CODEWITHSUNDEEP
javascriptjqueryhtmljquery-selectors
feri baco
feri baco

Reputation: 635

javascript alternative for jquery element addressing

What is Javascript alternative for this:

$('#clientDetailModal #heightValue')

I need it because in my code this works:

document.getElementById('heightValue').checkValidity()

but this doesn't:

$('#clientDetailModal #heightValue').checkValidity()

And I need to select only heightValue within clientDetailModal div.

Upvotes: 0

Views: 270

Answers (5)

HBP
HBP

Reputation: 16033

Since the OP asked for a JavaScript alternative. On modern browsers,

document.querySelector ('#clientDetailModal #heightValue')

will return the element you are asking for.

The direct equivalent would be 

document.querySelectorAll ('#clientDetailModal #heightValue')

which returns an array of elements matching the selector requested, do yrou will need to add the [0] as per the other answers.

Upvotes: 0

Denys Séguret
Denys Séguret

Reputation: 382122

You could use get to get the DOM element :

$('#clientDetailModal #heightValue').get(0).checkValidity()

Just to be sure, as your question might be a little ambiguous : only one element can have a given ID in HTML. So if your element is either absent or inside #clientDetailModal, then you could as well use 

$('#heightValue').get(0).checkValidity()

It would also be faster. But in that case, there would be nothing wrong in using document.getElementById.

Upvotes: 2

techfoobar
techfoobar

Reputation: 66663

Since document.getElementById('heightValue').checkValidity() works, it means your function checkValidity() is attached on native DOM elements. This means, you can do:

$('#clientDetailModal #heightValue')[0].checkValidity()

Plus: If your HTML is valid with no duplicate IDs, you can simply do

$('#heightValue')[0].checkValidity()

Upvotes: 1

painotpi
painotpi

Reputation: 6996

Try $('#clientDetailModal #heightValue')[0].checkValidity()

The reason you need to do the [0] is, (as per the jquery id selector documentation)

Calling jQuery() (or $()) with an id selector as its argument will return a jQuery object containing a collection of either zero or one DOM element

Since you'll get a collection with 1 DOM element (assuming you don't have multiple ids), you need to then explicitly "select" that element using the [0].

Upvotes: 5

Laurent S.
Laurent S.

Reputation: 6946

I presume this is what you're looking for :

document.getElementById('clientDetailModal').getElementById('heightValue').checkValidity();

Upvotes: -1

Related Questions