Getting data-attribute Values with jQuery

jQuery lets us easily access the data-* attribute values of HTML elements. This feature is very useful for storing additional information about elements. If you want to get data from specific HTML elements on a page and process that data, jQuery's data() function will be very helpful.

In this article, we will examine how to retrieve data-* attributes from related div elements when buttons on an HTML page are clicked, and how to get the data from all div elements collectively. We will also focus on making our code cleaner and shorter.

Example Scenario: Retrieving Product Information

Let's say you have div elements that display product information on a page, and each product has a "Get Data" button. There is also a general button to retrieve data from all products on the page.

Below, let's examine the HTML structure for this example scenario:

<div>
  <div class="product" data-id="3234" data-product-index="1" data-name="Product 1">Some Content</div>
  <button type="button" class="getDataBtn">Get Data on div</button>
</div>
<div>
  <div class="product" data-id="423" data-product-index="2" data-name="Product 2">Some Content</div>
  <button type="button" class="getDataBtn">Get Data on div</button>
</div>
<div>
  <div class="product" data-id="3234" data-product-index="3" data-name="Product 3">Some Content</div>
  <button type="button" class="getDataBtn">Get Data on div</button>
</div>
<br><br>
<button type="button" class="getAllDataBtn">Get Data on all div</button>

Here, each div element with the product class stores product-related information such as data-id, data-product-index, and data-name. There is a button for each product, as well as a general button for retrieving the data of all products.

Getting Data from a Single Product with jQuery

When you click a button, we can use the following jQuery code to retrieve the data-* attribute values from the related div element:

$(".getDataBtn").click(function () {
  var divData = $(this).siblings(".product").data();
  console.log(divData);
});

• Explanation:
  • When a button with the .getDataBtn class is clicked, .siblings(".product") reaches the div element with the product class inside the same wrapper. Then, the .data() function retrieves all data-* attributes from that div element as an object and assigns them to the divData variable. You can display this variable with console.log().

Getting Data from All Products

To retrieve the data-* attributes of all div elements with the product class on the page, we can use the following jQuery code:

$(".getAllDataBtn").click(function () {
  var allDivData = [];
  $(".product").each(function () {
    allDivData.push($(this).data());
  });
  console.log(allDivData);
});

• Explanation:
  • When a button with the .getAllDataBtn class is clicked, all div elements with the product class on the page are processed one by one with the .each() loop. The data retrieved from each div element with the .data() function is added to the array named allDivData. Finally, this array is displayed with console.log().

Simplifying the Code

Thanks to the flexibility jQuery provides, we can make our code shorter and simpler. For example:

// Getting data from a single product
$(".getDataBtn").click(function () {
  console.log($(this).siblings(".product").data());
});
 
// Getting data from all products
$(".getAllDataBtn").click(function () {
  console.log($(".product").map(function () { return $(this).data(); }).get());
});

• Simplification Explanation:
  • When getting data from a single product, instead of using a temporary variable named divData, we can print the data directly inside console.log().
  • When getting data from all products, we can use .map() instead of .each() for a shorter syntax. With the .get() function, we convert the jQuery object into a plain JavaScript array.

Conclusion

In this article, we saw how easy it is to retrieve data-* attributes from HTML elements with jQuery. With the data() function, you can access this data and process it however you want. By simplifying our code, we can create a shorter and more readable structure. These kinds of operations make data manipulation in your web projects much easier.

I hope this article helped you work with data-attribute values in jQuery!