JQuery: working with the wrapped set – part V

In the previous posts we’ve started looking at how we could interact with the wrapped set. In this post we’ll keep interacting with the wrapped set, but we’ll be concentrating on changing the wrapped HTML nodes. As you surely know, each wrapped DOM element also exposes several properties, methods and events.

These properties are normally mapped to the HTML attributes of the element, though you can also access this information through the node’s attribute collection. For instance, to get the css class of an element, you can use the className property or access the node’s attribute collection. Here’s some JS code that shows how to do that:

var className = $("div")[0].className;
var className2 = $("div")[0].attributes["class"].nodeValue;

As you can see, we’re using our JQuery knowledge for getting a  reference to the first div and then we’re getting the current class that has been applied to that div. In practice, you can think of the className property as being a shortcut to the attributes[“class”] member. This snippet also demonstrates an interesting feature: not all properties match the HTML attribute’s name.

Even though there’s no method for changing the value of a property, JQuery does have one method for reading and writing the value of an attribute: I’m talking about the attr method. As always, there’s a lot of flexibility here. If you pass only a string, then you’re trying to get the value of an existing attribute. For instance, here’s how you could use the attr method for getting the current class applied to the 1st wrapped div:

var className3 = $("div").attr("class");

Notice that even if you have more than one element on the wrapped node set, you’ll end up getting the attribute’s value of the first element. You can also use this method for setting the value of an attribute:

$("div").attr("class", "seomthing");

There’s an interesting difference between reading and writing: writing means that the passed value is applied to all the elements of the wrapped set. Besides passing a JS expression, you can also pass an object or a function. With an object, you’re setting several attributes at a time:

$("div").attr({ class: "something" });

Finally, if you need, you can also pass  a function to the previous method. In this case, the function is supposed to receive an integer which indicates the index of the current element and, inside the function, the this variable points to the current element. Notice that the return value of the function  is applied to the attribute. Here’s an example of how to use a function:

$("div").attr("class",
  function(index) {
    //this points to the current element
    return "something;";
  });

Notice  that if you pass a value that doesn’t exist, you’ll end up adding that attribute to the element’s attribute collection. btw, you should also keep in mind that the attr method returns a reference to a JQuery object (when you use it to set a value of an attribute). As you’ve probably guessed by now, there’s also a method for removing attributes. In JQuery, you’ll be using the removeAttr method for that.

Along this post, I’ve been interacting with the class attribute in all the samples. However, this is not the recommended approach for working with styles in JQuery land! On the next post we’ll keep interacting with the  wrapped set and we’ll see how to set and get styles from the wrapped set. Keep tuned for more on JQuery.