A small function to convert an array of ID strings into a dictionary of jQuery objects

I often use jQuery to modify the DOM. The simplest way to do this is to use jQuery’s query selector and a modifier function.

$("#intro").css("background-color", "green");

If you have to perform multiple actions on the same element, you can keep using this selector.

$("#intro").css("background-color", "green");

// Later...

$("#intro").hide();

Instead of searching the DOM every time we want to access this element, it is much more efficient to search for it once and store it in a variable.

var intro = $("#intro");

intro.css("background-color", "green");

// Later...

intro.hide();

If you have many elements to access…

var intro = $("#intro");
var header = $("#header");
var button = $("#button");
var form = $("#form");
var alert = $("#alert");
var footer = $("#footer");
// etc...

it may be wise to put them all into a “dictionary” object.

var dom = {
  intro: $("#intro"),
  header: $("#header"),
  button: $("#button"),
  form: $("#form"),
  alert: $("#alert"),
  footer: $("#footer"),
  /// etc...
};

This way they can be accessed by dot (or bracket) notation from the main object.

dom.intro.css("background-color", "green");
dom.header.hide();

dom["outro"].text("Goodbye.");
dom["alert"].show();

Writing the dictionary seems inefficient because there’s a lot of duplicated words. As long as your element IDs are also valid JavaScript variable names, we can automatically convert the IDs into variables with a small function.

The idsToJqObjects function

var idsToJqObjects = function (arr) {
  return arr.reduce(function addJqToObject(obj, newKey) {
    obj[newKey] = $("#" + newKey);
    return obj;
  }, {});
};

Use it in this way:

var dom = idstoJqObjects([
  "intro",
  "header",
  "button",
  "form",
  "alert",
  "footer",
  // etc...
]);

Your jQuery objects can be accessed with the same dot or bracket notation as before, without having to write duplicate code for each ID/variable.

Cover photo by Kalliop3 under CC BY-SA 2.0.