- jQuery since its included as part of core as is the choice library for the front-end
- Backbone since its also included as part of core and is used in features like the Media Uploader
Should there be, though? I mean the jQuery Documentation is solid.
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
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.
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
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.