Is there a shortcut way to refer to elements in my DIV?

Question

I have the following:

<div class="modal hide fade" id="adminDialog" style="display: none;">
    <div class="modal-header">
        <a data-dismiss="modal" class="close">×</a>
         <h3 id='dialog-heading'></h3>
    </div>
</div>

I created this variable:

dialogDiv = $('#adminDialog');

I would like to change the text of the heading. If I want to do this do I need to use $('#dialog-heading').text() or is there a shortcut way that is based on the dialogDiv variable?

Starx · Accepted Answer · 2012-04-16T08:06:01.417

1

If it has to be based on the dialogDiv then this is the best one I know

$("h3", $("#adminDialog")).text('new text');

Or

$("h3", dialogDiv).text('new text');

This selector tell you to find a h3 within the scope of #adminDialog.

But you are using an id for the div, so no selector can top the direct selection. Like

$('#dialog-heading').text('new text');

edited Apr 16 '12 at 08:06

answered Apr 16 '12 at 07:56

Starx

77,474
47
185
261

h3 comes first? I never saw this kind of selector before. Also can I just replace $("#adminDialog") with dialogDiv? – Apr 16 '12 at 07:58
So $("h3", dialogDiv).text() would be okay? That's looks very clean to me :-) – Apr 16 '12 at 08:04
@MarieJ, Yes it is OK and very clear way to select within a scope. – Starx Apr 16 '12 at 08:05

score 0 · Answer 2 · edited Apr 16 '12 at 08:01

0

You can use either dialogDiv or $('#adminDialog') as they refer to same object. It only works if the dialogDiv is present in your current scope (meaning, if you've assigned it in a function, it is only available within that function)

edited Apr 16 '12 at 08:01

Starx

77,474
47
185
261

answered Apr 16 '12 at 07:52

Nanne

64,065
16
119
163

1

A lookup by ID will be quicker than one based in `dialogDiv` though since ID lookups are most likely `O(1)`. – ThiefMaster Apr 16 '12 at 07:56
But what I was meaning is what's the cleanest way for me to set the H3 title. I think it looks a little more clean if I can use dialogDiv as a base but I am not sure how to do that. – Apr 16 '12 at 07:56
define clean, it's not 'written in stone'. If you need to use it for many things, you can save it in a variable, but if you only do one thing, just use the jquery directly, so you don't have all teh variables. And about the speed: you are looking at minor, minor, microoptimalization here, don't bother with that please. – Nanne Apr 16 '12 at 07:58

score 0 · Answer 3 · answered Apr 16 '12 at 07:54

0

As long as you have access to dialogDiv within the current scope, it is even prefered to use dialogDiv.find("#dialog-heading").text("new text"), as it wouldn't have to go through the entire DOM again, thus slightly more performent.

answered Apr 16 '12 at 07:54

Christofer Eliasson

32,939
7
74
103

Wouldn't `$('#adminDialog')` be cached by jQuery? – KooiInc Apr 16 '12 at 07:56
@KooiInc Would it? I have always read that you should cache the object yourself for performance. Is the caching new or simply something I missed? Any good read on that? – Christofer Eliasson Apr 16 '12 at 08:01
You didn't miss anything, my bad, nothing is cached. See http://stackoverflow.com/questions/291841/does-jquery-do-any-kind-of-caching-of-selectors. – KooiInc Apr 16 '12 at 08:14
@KooiInc Ahh good, you made me confused there for a second :) – Christofer Eliasson Apr 16 '12 at 08:17

score 0 · Answer 4 · answered Apr 16 '12 at 07:57

0

It highly depends on your needs.

Since your element has an ID, $('#dialog-heading') will be the fastest way to access it.

However, if you want to access "the <h3> inside #adminDialog", better use adminDialog.find('h3')

answered Apr 16 '12 at 07:57

ThiefMaster

310,957
84
592
636

score 0 · Answer 5 · answered Apr 16 '12 at 08:08

0

Assuming you only have one h3 child element in your div#adminDialog, you can also use a CSS selector:

$('div#adminDialog h3').text("bla bla")

answered Apr 16 '12 at 08:08

frno

2,641
2
18
19

Is there a shortcut way to refer to elements in my DIV?

5 Answers5