Tutorials

jQuery jQuery.unique() Method

Posted in jQuery Tutorial

Updated on Nov 21, 2024

By Mari Selvan

👁️ 39 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

jQuery offers a multitude of methods to simplify JavaScript development, and one such method is jQuery.unique(). This method enables you to filter out duplicate elements from an array of DOM elements effortlessly. Understanding how to utilize jQuery.unique() can streamline your code and enhance the efficiency of your web applications.

In this guide, we'll explore the functionality of the jQuery.unique() method with clear examples to illustrate its usage.

🧠 Understanding jQuery.unique() Method

The jQuery.unique() method is designed to remove duplicate elements from an array of DOM elements while preserving their order. This is particularly useful when you're dealing with collections of elements and need to ensure uniqueness.

💡 Syntax

The syntax for the jQuery.unique() method is straightforward:

syntax.js

Copied

jQuery.unique(array)

Parameters:

array: An array containing DOM elements.

Return Value:

A new array containing unique DOM elements.

📝 Example

Filtering Duplicate Elements:

Suppose you have an array of DOM elements containing duplicates, and you want to filter them out:
example.js
Copied
```
var elements = [document.getElementById("item1"), document.getElementById("item2"), document.getElementById("item1")];
var uniqueElements = jQuery.unique(elements);
console.log(uniqueElements);
```
Here, $elements is a jQuery object containing elements with the class .item. By calling .get(), we retrieve the array of DOM elements, which is then passed to jQuery.unique() to remove duplicates.
Maintaining Element Order:

One of the key features of jQuery.unique() is that it preserves the order of elements in the array. Consider the following example:
example.js
Copied
```
var elements = [document.getElementById("item2"), document.getElementById("item1"), document.getElementById("item2")];
var uniqueElements = jQuery.unique(elements);
console.log(uniqueElements);
```
Even though item2 appears twice in the array, the order is retained, and uniqueElements will contain item2 followed by item1.

🎉 Conclusion

The jQuery.unique() method provides a convenient way to remove duplicate elements from arrays of DOM elements, ensuring uniqueness while preserving order. Whether you're working with plain arrays of DOM elements or jQuery objects, this method simplifies the process of handling collections, resulting in cleaner and more efficient code.

By mastering the usage of jQuery.unique(), you can improve the performance and maintainability of your web applications.