Travis Horn
Travis Horn

Travis Horn

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

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

Travis Horn's photo
Travis Horn

Published on Jul 16, 2016

2 min read

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');

Photo by [Kalliop3]( under [CC BY-SA 2.0]( by Kalliop3 under CC BY-SA 2.0

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

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

// Later...


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...


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');


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([
  // 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.

Share this