Skip to content

prevAll:uniqueAll: Add uniqueAll, use it in reverse doc order examples #1216

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
May 11, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions categories.xml
Original file line number Diff line number Diff line change
Expand Up @@ -510,6 +510,15 @@ var files = event.originalEvent.dataTransfer.files;
<hr/>
]]></desc>
</category>
<category name="Version 3.7" slug="3.7">
<desc><![CDATA[
<p>Aspects of the API that were changed in the corresponding version of jQuery. New <code>.uniqueSort()</code> method performance improvements in manipulation, fixes for <code>.outerWidth( true )</code> &amp; <code>.outerHeight( true )</code> with negative margins, focus fixes.</p>
<p>As of this release, jQuery no longer relies on Sizzle.</p>
<p>Native events for <code>focus</code> &amp; <code>blur</code> changed in IE to - respectively - <code>focusin</code> and <code>focusout</code>.</p>
<p>For more information, see the <a href="https://blog.jquery.com/2023/05/11/jquery-3-7-0-released-staying-in-order/">Release Notes/Changelog</a>.</p>
<hr/>
]]></desc>
</category>
<category name="All" slug="all"/>
</category>
</categories>
19 changes: 13 additions & 6 deletions entries/prevAll.xml
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,14 @@ $( ".last-item" )
&lt;div class="last-item"&gt;Last&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<p>because "Item 2" gets appended to the wrapper div first. To work around the issue, you may use <code><a href="/jQuery.uniqueSort/">$.uniqueSort()</a></code> on the <code>.prevAll()</code> output first:</p>
<p>because "Item 2" gets appended to the wrapper div first. To work around the issue, you may use <code><a href="/uniqueSort/">.uniqueSort()</a></code> on the <code>.prevAll()</code> output first:</p>
<pre><code>
$( ".last-item" )
.prevAll()
.uniqueSort()
.wrapAll( "&lt;div class='wrapper'&gt;&lt;/div&gt;" );
</code></pre>
<p>Note that the <code><a href="/uniqueSort/">.uniqueSort()</a></code> method is only available in jQuery 3.7.0 or newer. In older versions, you will need to use <code><a href="/jQuery.uniqueSort/">$.uniqueSort()</a></code> to achieve a similar effect:</p>
<pre><code>
var prevSiblings = $( ".last-item" ).prevAll();
$.uniqueSort( prevSiblings );
Expand Down Expand Up @@ -83,20 +90,20 @@ $( "div" ).last().prevAll().addClass( "before" );
]]></html>
</example>
<example>
<desc>Locate all the divs preceding the last item and wrap them with a div with class <code>wrapper</code> - with or without <code><a href="/jQuery.uniqueSort/">$.uniqueSort()</a></code>.</desc>
<desc>Locate all the divs preceding the last item and wrap them with a div with class <code>wrapper</code> - with or without <code><a href="/uniqueSort/">.uniqueSort()</a></code>.</desc>
<code><![CDATA[
$( "#container-1" )
.find( ".item" )
.last()
.prevAll()
.wrapAll( "<div class='wrapper' data-content='No uniqueSort'></div>" );

var prevSiblings = $( "#container-2" )
$( "#container-2" )
.find( ".item" )
.last()
.prevAll();
$.uniqueSort( prevSiblings );
prevSiblings.wrapAll( "<div class='wrapper' data-content='With uniqueSort'></div>" );
.prevAll()
.uniqueSort()
.wrapAll( "<div class='wrapper' data-content='With uniqueSort'></div>" );
]]></code>
<css><![CDATA[
body {
Expand Down
112 changes: 112 additions & 0 deletions entries/uniqueSort.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
<?xml version="1.0"?>
<entry type="method" name="uniqueSort" return="jQuery">
<title>.uniqueSort()</title>
<signature>
<added>3.7</added>
</signature>
<desc>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.</desc>
<longdesc>
<p>The <code>.uniqueSort()</code> 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 <em>exact same</em> 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.</p>
</longdesc>
<example>
<desc>Removes any duplicate elements from the jQuery object of divs.</desc>
<code><![CDATA[
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" );
]]></code>
<css><![CDATA[
div {
color: blue;
}
]]></css>
<html><![CDATA[
<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>
]]></html>
</example>
<example>
<desc>Locate all the divs preceding the last item and wrap them with a div with class <code>wrapper</code> - with or without <code><a href="/uniqueSort/">.uniqueSort()</a></code>.</desc>
<code><![CDATA[
$( "#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>" );
]]></code>
<css><![CDATA[
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;
}
]]></css>
<html><![CDATA[
<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>
]]></html>
</example>
<category slug="utilities"/>
<category slug="version/3.7"/>
</entry>
2 changes: 1 addition & 1 deletion entries2html.xsl
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
&lt;meta charset="utf-8"&gt;
&lt;title&gt;<xsl:value-of select="//entry/@name"/> demo&lt;/title&gt;<xsl:if test="css">
&lt;style&gt;<xsl:value-of select="css/text()"/> &lt;/style&gt;</xsl:if>
&lt;script src="https://code.jquery.com/jquery-3.6.3.js"&gt;&lt;/script&gt;<xsl:if test="code/@location='head'">
&lt;script src="https://code.jquery.com/jquery-3.7.0.js"&gt;&lt;/script&gt;<xsl:if test="code/@location='head'">
&lt;script&gt;
<xsl:copy-of select="code/text()"/>
&lt;/script&gt;
Expand Down