There are a number of JavaScript libraries and frameworks available right now – more than there have ever been before – and I think that’s a great thing.

If you’re a WordPress developer, odds are you’ve worked with at least one of three variations of JavaScript:

  1. jQuery since its included as part of core as is the choice library for the front-end
  2. Backbone since its also included as part of core and is used in features like the Media Uploader
  3. Vanilla JavaScript because sometimes the rest is overkill

And if you’re building advanced themes, plugins, or even web applications with WordPress, then odds are you’ve had to do some fancy stuff with JavaScript (using one or none of the aforementioned libraries). One of the challenges we face, though, is there’s no formal documentation of how to use jQuery within the context of WordPress core.

Should there be, though? I mean the jQuery Documentation is solid.

jQuery API

Anyway, one of the things I’ve stumbled across when writing my own code or in performing code audits is the way in which some developers attempt to get values of multiple elements in jQuery. Though there are some ways that work, there are always some options better than others.

Get Values of Multiple Elements

Normally, these types of problems are best demonstrated through the use of some type of concrete example.

Let’s say you have a set of hidden div elements. It doesn’t necessarily contain anything secure (because anyone who’s familiar with their browsers developer tools could hop in an display the data), but it’s mean to provide easy access to the data without mucking with the layout.

For example, let’s say you’re working with a custom post type and there are multiple custom post types displayed per page. Furthermore, you need to perform some type of operation in which you need all of the IDs for each of the displayed post types.

Maybe you’re going to be making an Ajax request, maybe you’re going to be manipulating the DOM for each of the custom post types, or maybe you’re going to be doing something with which I’m completely unaware.

Whatever the case:

  • There is a hidden element containing a list of all of the IDs
  • You need to retrieve the list of all of the IDs contained in the hidden list

Used to, the easiest way to do this, using jQuery, was the use the each iterator and to go traverse the list building up a string of the data you need. Though that’s not a bad solution, it’s may demonstrate a different intent (which I’ll cover more later).

Instead, why not try a combination of the map and the join functions? Take a look at the following gist and then I’ll explain what’s happening below:

At first glance, this may look a bit more complication that using the each iterator. After all, rather than using a single function and an anonymous function, we’re using the map, get, and join functions.

Understanding The Code

Here’s what each does:

  • This assumes we have a custom post type called Reviews and we’ve dropped all of the IDs into multiple containers having the class attribute of review-id.
  • Next, we leverage the map function which “translates all items in an array or object to a new array of items.” You can read more about it in the documentation. So this code returns the value of the text of each of the elements.
  • Afterwards, we call the get method which grabs all of the elements matched by jQuery.
  • Finally, we use join which is a standard JavaScript method that converts an array into a string separated by the specified string. In our case, this is the comma.

Given this code, we’ll end up with a string like “12, 65, 111, 94, 56” and so on. Obviously, you mileage will vary based on how you’re structured your markup.

A Word About Performance

This raises a question about each versus map. That is, why use the latter versus the former? It’s not so much about why you should use one versus the other but what your intent is with the data.

By that, I mean each is meant to purely iterate through the data (or what’s called an immutable iterator). On the other hand, map is meant to manipulate the data of the provided collection and return a new collection.

In some cases, you can use them interchangeably. In others, the code clarifies what your intent is with what you’re doing. Thus, depending on what your needs are, determine what you need for your work and go from there.

If you're reading this post in an RSS reader, don't forget to click on the "gist" link to see the code for the post.

Category:
Tips
Tags:
,

    Leave a Reply