.uniqueSort()Returns: jQuery
Description: Sorts a jQuery object of DOM elements, in place, with the duplicates removed. Note that this only works on jQuery objects consisting of DOM elements, not strings or numbers.
-
version added: 3.7.uniqueSort()
- This method does not accept any arguments.
The .uniqueSort() function searches through a jQuery object, sorting it in document order, and removing any duplicate nodes. A node is considered a duplicate if it is the exact same node as one already in the jQuery object; two different nodes with identical attributes are not considered to be duplicates. This function only works on jQuery objects consisting of DOM elements.
Examples:
Removes any duplicate elements from the jQuery object of divs.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>uniqueSort demo</title>
<style>
div {
color: blue;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
<div>There are 6 divs in this document.</div>
<div></div>
<div class="dup"></div>
<div class="dup"></div>
<div class="dup"></div>
<div></div>
<script>
var divs = $( "div" ).get();
// Add 3 elements of class dup too (they are divs)
divs = divs.concat( $( ".dup" ).get() );
// Create a jQuery object from `divs`.
var elems = $( divs );
$( "div" )
.eq( 1 )
.text( "Pre-uniqueSort there are " + elems.length + " elements in the collection." );
elems = elems.uniqueSort();
$( "div" )
.eq( 2 )
.text( "Post-uniqueSort there are " + elems.length + " elements in the collection." )
.css( "color", "red" );
</script>
</body>
</html> Demo:
Locate all the divs preceding the last item and wrap them with a div with class wrapper - with or without .uniqueSort().
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>uniqueSort demo</title>
<style>
body {
display: flex;
}
.container {
display: flex;
margin: 10px 50px 10px 10px;
}
.wrapper {
position: relative;
display: flex;
padding: 30px 10px 10px 10px;
background: #def;
border: 2px solid black;
}
.wrapper::before {
content: attr(data-content);
position: absolute;
top: 15px;
left: 15px;
}
.item {
display: flex;
justify-content: center;
align-items: center;
width: 70px;
height: 70px;
background: #abc;
border: 2px solid black;
margin: 10px;
font-size: 50px;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
<div class="container" id="container-1">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<div class="container" id="container-2">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<script>
$( "#container-1" )
.find( ".item" )
.last()
.prevAll()
.wrapAll( "<div class='wrapper' data-content='No uniqueSort'></div>" );
$( "#container-2" )
.find( ".item" )
.last()
.prevAll()
.uniqueSort()
.wrapAll( "<div class='wrapper' data-content='With uniqueSort'></div>" );
</script>
</body>
</html>