Creating an object of Jquery objects

Question

So I wanted to design a jQuery structure that would make refactoring and adding fields simpler for in the future for my forms. My initial idea was something like this.

var dom = {
    "Popup": {
        "Title": "Edit Ticket",
        "Width": popupWidth,
        "Container": $("#TicketPopup"),
        "Buttons": {
            "Save": $("#SaveTicketPopup"),
            "Close": $("#CloseTicketPopup"),
        },
        "Fields": {
            "Id": $("#TicketPopupTableTicketID"),
            "ContactEmail": $("#TicketPopupTableUserEmail"),
            "ContactPhone": $("#TicketPopupTableUserPhone"),
            "Name": $("#TicketPopupTableItemName"),
            "CategoryString": $("#TicketPopupTableCategory"),
            "DateSubmittedString": $("#TicketPopupTableDateSubmitted"),
            "StatusString": $("#TicketPopupTableStatus"),
            "DateResolvedString": $("#TicketPopupTableDateResolved"),
            "DateArchivedString": $("#TicketPopupTableArchived"),
            "Description": $("#TicketPopupTableDescription"),
            "Initials": $("#TicketUpdateInitials"),
        }
    }
}

My question is mainly structured around the fact that I can initialize before document ready despite the objects not necessarily being on the page at that point. Does this mean I am calling document.getElementById rather than storing the resulting element every time? I also was wondering if it would be more efficient to .each over my Fields sub object rather than doing something like $("input", "#popup"). Thanks for any input.

user229044 · Accepted Answer · 2013-11-01 19:17:20Z

2

I can initialize before document ready despite the objects not necessarily being on the page at that point. Does this mean I am calling document.getElementById rather than storing the resulting element every time?

No, it means your objects will simply be empty and your code will be broken. You cannot use jQuery to fetch a DOM element until the element exists in the DOM. jQuery selectors will not be lazily evaluated. You need to delay the initialization of your script (or at least the part that accesses the DOM) until after the elements exist.

I also was wondering if it would be more efficient to .each over my Fields sub object rather than doing something like $("input", "#popup")

It will be vastly more efficient to iterate over Fields. The slowest thing your script is likely to do is access the DOM; every time you can use an existing jQuery object instead of querying the DOM again, you absolutely should do so.

edited Nov 1, 2013 at 19:17

answered Nov 1, 2013 at 18:58

user229044♦

241k41 gold badges348 silver badges350 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

James Montagne Over a year ago

I think you've misunderstood the 2nd question slightly. The way I read it at least, the question is if it will be more efficient to iterate over the Fields property of the custom object vs using jquery to select all input elements contained in the #popup element.

user229044 Over a year ago

@JamesMontagne I think you're correct. I've updated my answer.

nicmoon Over a year ago

Hmmm...if what you are saying is true my namespace must not be evaluated until the document is ready. Now that I think about it my script is being rendered at PageEnd so all the DOM elements I am using should already exist. Hence the reason it still seems to be working for me. Thank you for helping me realize this - I knew something didn't add up.

Collectives™ on Stack Overflow

Creating an object of Jquery objects

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related