.uniqueSort()

Categories: Utilities

.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.

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
 
<!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.1.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().

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
 
<!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.1.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>

Demo: