Search jQuery

jQuery Forum

dom traversal on click issue

in Using jQuery • 9 years ago

I am trying a form validation on click of a button. I expected to be able to traverse up using closest and then use find for each input field. It doesn't seem to be working. Also, in general, I am finding I can select an element just by id without any traversal. This is the jsfiddle code Thanks in advance.

Replies(9)

watusiware

Re: dom traversal on click issue

9 years ago

But you aren't using .closest() in your code...

Unrelated, I see you using native DOM methods like getElementByID(). (Actually, you are mixing use of jQuery and native DOM methods...)

Why? jQuery has query and DOM-manipulation functions that are easier to use, shorter to type, and cross-browser compatible. I'd urge you to use them - it's the very core of jQuery.

dsvick

Re: dom traversal on click issue

9 years ago

I don't see closest in the code you posted. Where are you trying to use it? Can you post a smaller version of the code that just illustrates the problem you're having?

And, yes, you can certainly address elements much easier and faster using their ID, and that is how you should do it if you can. Closest and the other traversing methods are for when you don't know the ID.

Dave

jacob

Re: dom traversal on click issue

9 years ago

my code is getting out of control. I am reworking this and making progress. THANKS

watusiware

Re: dom traversal on click issue

9 years ago

.closest() should work, but without seeing how you tried to use it...

It's useful to explore the DOM-traversal functions in a Javascript console. Every desktop browser has a Javascript console. You can just type-in Javascript statements and see the results.

jacob

Re: dom traversal on click issue

9 years ago

Thanks to all trying to help. My problem came from typos actually. I have moved on but here is a similar example that confuses me. I have this code for a button

$('#question-area').on('click', '#contButton', function() {

/// clear error messages if any from prior click

$(this).closest('#question-area').find('#errMsg_user_name').removeClass('showErrorMessage');

$(this).closest('#question-area').find('#errMsg_role').removeClass('showErrorMessage');

$(this).closest('#question-area').find('#errMsg_age').removeClass('showErrorMessage');

var xData = $('#question-area').find('#petitioner').data('formanswer');

var roleSelected = $('input[name=userRoleSelect]:checked').data('formanswer');

console.log('roleSelected is ' + roleSelected);

This seems to be working but my question is why does roleSelected work without traversal as used for xData. Thanks in advance

jakecigar

Re: dom traversal on click issue

9 years ago

$(this).closest('#question-area') doesn’t make any sense. question-area is an id, and must be unique. If you have more than one, you have invalid HTML.

$('#question-area') finds the one and only question-area.

JΛ̊KE

jacob

Re: dom traversal on click issue

9 years ago

ok, I understand only one id and that is what I am doing. But I thought you still need to traverse the DOM- you can't just use the id and jquery fetches it any where on the page. If this is the case you never need closest and find if you need an element with an #id? So for a button click event you need to traverse the dom to the element you want effect and using id is fast way to do exactly because there is only one of them.

watusiware

Re: dom traversal on click issue

9 years ago

you can't just use the id and jquery fetches it any where on the page.

Yes, you can. That's the whole point of IDs. They are unique (or are supposed to be...) and so all you need is the ID. And it's fast as heck, because browsers going way-back have kept an internal hash table (= fast) of IDs. (class selectors used to be slow, but modern browsers have started keeping a hash table of CSS classes, as well.)

If this is the case you never need closest and find if you need an element with an #id?

Correct.

Now, .closest() actually can be used with IDs, but it doesn't make much sense.

$(this).closest("#question-area") will return the element with ID question-area if it is a parent of this. If it's not a parent of this, it will return nothing. (So, it can be used to test if an element with ID is a parent of some element, which is kinda cute...)

This trips-up jQuery Mobile users to no end, and is why I recommend that IDs never be used with jQuery Mobile. (jQuery Mobile is an add-on library, and doesn't refer to generic mobile development. If you are just using jQuery, you don't have to worry about it.)

JQM stores multiple "pages" in the document, and so you have to be careful to not duplicate an ID anywhere in your entire site. While it seems logical you could work-around this by searching for a duplicate ID within a particular page (element) that won't work. All it does is first find the ONE element matching the ID and then check to see if it a child of the page. So, you wind-up getting zero elements.

MOST browsers, when confronted with duplicate IDs, will give you the FIRST one found in the document. But no guarantees! In any case, you can never get more than one result from an ID query.

jacob

Re: dom traversal on click issue

9 years ago

well that helps a lot. I have been only using one id so I got that straight but I was clearly confused about traversal. thanks!

Top Reply

Response title

Attachments

jQuery Forum

dom traversal on click issue

Replies(9)

Re: dom traversal on click issue

Re: dom traversal on click issue

Re: dom traversal on click issue

Re: dom traversal on click issue

Re: dom traversal on click issue

Re: dom traversal on click issue

Re: dom traversal on click issue

Re: dom traversal on click issue

Re: dom traversal on click issue

Statistics

Tags

Actions

Related Posts