.uniqueSort()Возвращает: jQuery
Описание: Сортирует объект jQuery DOM-элементов на месте, удаляя дубликаты. Обратите внимание, что это работает только с объектами jQuery, содержащими DOM-элементы, а не строки или числа.
-
версия добавлена: 3.7.uniqueSort()
- Этот метод не принимает никаких аргументов.
Функция .uniqueSort() ищет в объекте jQuery, сортирует его в порядке документа и удаляет любые дублирующиеся узлы. Узел считается дубликатом, если он является абсолютно таким же узлом, как уже присутствующий в объекте jQuery; два разных узла с идентичными атрибутами не считаются дубликатами. Эта функция работает только с объектами jQuery, содержащими DOM-элементы.
Примеры:
Удаляет любые дублирующие элементы из объекта jQuery 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> Демо:
Находит все divs, предшествующие последнему элементу, и оборачивает их в div с классом wrapper - с или без .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> 
