All: Mark positional selectors as deprecated since jQuery 3.4.0

categories.xml

@@ -71,14 +71,19 @@
         <p>For more information, see the Release Notes/Changelog at <a href="https://blog.jquery.com/2016/06/09/jquery-3-0-final-released/">https://blog.jquery.com/2016/06/09/jquery-3-0-final-released/</a></p>
       ]]></desc>
     </category>
-	<category name="Deprecated 3.3" slug="deprecated-3.3">
+    <category name="Deprecated 3.3" slug="deprecated-3.3">
       <desc><![CDATA[All the aspects of the API that were deprecated in the corresponding version of jQuery.
         <p>For more information, see the Release Notes/Changelog at <a href="https://blog.jquery.com/2018/01/19/jquery-3-3-0-a-fragrant-bouquet-of-deprecations-and-is-that-a-new-feature/">https://blog.jquery.com/2018/01/19/jquery-3-3-0-a-fragrant-bouquet-of-deprecations-and-is-that-a-new-feature/</a></p>
       ]]></desc>
     </category>
+    <category name="Deprecated 3.4" slug="deprecated-3.4">
+      <desc><![CDATA[All the aspects of the API that were deprecated in the corresponding version of jQuery.
+        <p>For more information, see the Release Notes/Changelog at <a href="https://blog.jquery.com/2019/04/10/jquery-3-4-0-released/">https://blog.jquery.com/2019/04/10/jquery-3-4-0-released/</a></p>
+      ]]></desc>
+    </category>
   </category>
   <category name="Dimensions" slug="dimensions">
-	  <desc><![CDATA[These methods are used to get and set the CSS dimensions for the various properties.]]></desc>
+    <desc><![CDATA[These methods are used to get and set the CSS dimensions for the various properties.]]></desc>
   </category>
   <category name="Effects" slug="effects">
     <desc><![CDATA[The jQuery library provides several techniques for adding animation to a web page. These include simple, standard animations that are frequently used, and the ability to craft sophisticated custom effects.]]></desc>

entries/addClass.xml

@@ -64,7 +64,7 @@ $( "p" ).last().addClass( "selected" );
   <example>
     <desc>Add the classes "selected" and "highlight" to the matched elements.</desc>
     <code><![CDATA[
-$( "p:last" ).addClass( "selected highlight" );
+$( "p" ).last().addClass( "selected highlight" );
 ]]></code>
     <css><![CDATA[
   p {

entries/animate.xml

@@ -249,12 +249,12 @@ $( "#go4" ).click(function() {
     <desc>Animates the first div's left property and synchronizes the remaining divs, using the step function to set their left properties at each stage of the animation. </desc>
     <code><![CDATA[
 $( "#go" ).click(function() {
-  $( ".block:first" ).animate({
+  $( ".block" ).first().animate({
     left: 100
   }, {
     duration: 1000,
     step: function( now, fx ){
-      $( ".block:gt(0)" ).css( "left", now );
+      $( ".block" ).slice( 1 ).css( "left", now );
     }
   });
 });

entries/children.xml

@@ -43,8 +43,8 @@ $( "#container" ).click(function ( event ) {
   var kids = $( event.target ).children();
   var len = kids.addClass( "hilite" ).length;
 
-  $( "#results span:first" ).text( len );
-  $( "#results span:last" ).text( event.target.tagName );
+  $( "#results span" ).first().text( len );
+  $( "#results span" ).last().text( event.target.tagName );
 
   event.preventDefault();
 });

entries/contextmenu.xml

@@ -58,7 +58,7 @@ $( "p" ).contextmenu(function() {
   <example>
     <desc>Right click to toggle background color.</desc>
     <code><![CDATA[
-var div = $( "div:first" );
+var div = $( "div" ).first();
 div.contextmenu(function() {
   div.toggleClass( "contextmenu" );
 });

entries/data.xml

@@ -40,8 +40,8 @@ $( "body" ).data(); // { foo: 52, bar: { isManual: true }, baz: [ 1, 2, 3 ] }
       <desc>Store then retrieve a value from the div element.</desc>
       <code><![CDATA[
 $( "div" ).data( "test", { first: 16, last: "pizza!" } );
-$( "span:first" ).text( $( "div" ).data( "test" ).first );
-$( "span:last" ).text( $( "div" ).data( "test" ).last );
+$( "span" ).first().text( $( "div" ).data( "test" ).first );
+$( "span" ).last().text( $( "div" ).data( "test" ).last );
 ]]></code>
       <css><![CDATA[
   div {

entries/dblclick.xml

@@ -77,7 +77,7 @@ $( "p" ).dblclick(function() {
   <example>
     <desc>Double click to toggle background color.</desc>
     <code><![CDATA[
-var divdbl = $( "div:first" );
+var divdbl = $( "div" ).first();
 divdbl.dblclick(function() {
   divdbl.toggleClass( "dbl" );
 });

entries/end.xml

@@ -51,7 +51,7 @@ jQuery.fn.showTags = function( n ) {
   })
   .get()
   .join( ", " );
-  $( "b:eq( " + n + " )" ).text( tags );
+  $( "b" ).eq( n ).text( tags );
   return this;
 };
 

entries/eq-selector.xml

@@ -1,5 +1,5 @@
 <?xml version="1.0"?>
-<entry type="selector" name="eq" return="">
+<entry type="selector" name="eq" return="" deprecated="3.4">
   <title>:eq() Selector</title>
   <signature>
     <sample>:eq(index)</sample>
@@ -17,6 +17,7 @@
   </signature>
   <desc>Select the element at index <code>n</code> within the matched set.</desc>
   <longdesc>
+    <p><strong>As of jQuery 3.4</strong>, the <code>:eq</code> pseudo-class is deprecated. Remove it from your selectors and filter the results later using <a href="/eq/"><code>.eq()</code></a>.</p>
     <p>The index-related selectors (<code>:eq()</code>, <code>:lt()</code>, <code>:gt()</code>, <code>:even</code>, <code>:odd</code>) filter the set of elements that have matched the expressions that precede them. They narrow the set down based on the order of the elements within this matched set. For example, if elements are first selected with a class selector (<code>.myclass</code>) and four elements are returned, these elements are given indices <code>0</code> through <code>3</code> for the purposes of these selectors.</p>
     <p>Note that since JavaScript arrays use <em>0-based indexing</em>, these selectors reflect that fact. This is why <code>$( ".myclass:eq(1)" )</code> selects the second element in the document with the class myclass, rather than the first. In contrast, <code>:nth-child(n)</code> uses <em>1-based indexing</em> to conform to the CSS specification.</p>
     <p>Prior to jQuery 1.8, the <code>:eq(index)</code> selector did <em>not</em> accept a negative value for <code>index</code> (though the <a href="/eq/"><code>.eq(index)</code></a> method did).</p>
@@ -92,4 +93,5 @@ $( "li:eq(-2)" ).addClass( "foo" )
   <category slug="selectors/jquery-selector-extensions"/>
   <category slug="version/1.0"/>
   <category slug="version/1.8"/>
+  <category slug="deprecated/deprecated-3.4"/>
 </entry>

entries/even-selector.xml

@@ -1,5 +1,5 @@
 <?xml version="1.0"?>
-<entry type="selector" name="even" return="">
+<entry type="selector" name="even" return="" deprecated="3.4">
   <title>:even Selector</title>
   <sample>:even</sample>
   <signature>
@@ -33,4 +33,5 @@ $( "tr:even" ).css( "background-color", "#bbf" );
   <category slug="selectors/basic-filter-selectors"/>
   <category slug="selectors/jquery-selector-extensions"/>
   <category slug="version/1.0"/>
+  <category slug="deprecated/deprecated-3.4"/>
 </entry>

entries/fadeIn.xml

@@ -53,7 +53,7 @@ $( "#clickme" ).click(function() {
     <desc>Animates hidden divs to fade in one by one, completing each animation within 600 milliseconds.</desc>
     <code><![CDATA[
 $( document.body ).click(function() {
-  $( "div:hidden:first" ).fadeIn( "slow" );
+  $( "div:hidden" ).first().fadeIn( "slow" );
 });
 ]]></code>
     <css><![CDATA[

entries/fadeTo.xml

@@ -63,7 +63,7 @@ $( "#clickme" ).click(function() {
   <example>
     <desc>Animates first paragraph to fade to an opacity of 0.33 (33%, about one third visible), completing the animation within 600 milliseconds.</desc>
     <code><![CDATA[
-$( "p:first" ).click(function() {
+$( "p" ).first().click(function() {
   $( this ).fadeTo( "slow", 0.33 );
 });
 ]]></code>
@@ -128,8 +128,8 @@ var getPos = function( n ) {
 $( "p" ).each(function( n ) {
   var r = Math.floor( Math.random() * 3 );
   var tmp = $( this ).text();
-  $( this ).text( $( "p:eq(" + r + ")" ).text() );
-  $( "p:eq(" + r + ")" ).text( tmp );
+  $( this ).text( $( "p" ).eq( r ).text() );
+  $( "p" ).eq( r ).text( tmp );
   $( this ).css( "left", getPos( n ) );
 });
 $( "div" )

entries/fadeToggle.xml

@@ -26,11 +26,11 @@
   <example>
     <desc>Fades first paragraph in or out, completing the animation within 600 milliseconds and using a linear easing. Fades last paragraph in or out for 200 milliseconds, inserting a "finished" message upon completion. </desc>
     <code><![CDATA[
-$( "button:first" ).click(function() {
-  $( "p:first" ).fadeToggle( "slow", "linear" );
+$( "button" ).first().click(function() {
+  $( "p" ).first().fadeToggle( "slow", "linear" );
 });
-$( "button:last" ).click(function() {
-  $( "p:last" ).fadeToggle( "fast", function() {
+$( "button" ).last().click(function() {
+  $( "p" ).last().fadeToggle( "fast", function() {
     $( "#log" ).append( "<div>finished</div>" );
   });
 });

entries/first-child-selector.xml

@@ -7,7 +7,7 @@
   </signature>
   <desc>Selects all elements that are the first child of their parent.</desc>
   <longdesc>
-    <p>While <a href="/first-selector/">:first</a> matches only a single element, the <code>:first-child</code> selector can match more than one: one for each parent. This is equivalent to <code>:nth-child(1)</code>.</p>
+    <p>While <a href="/first/">.first()</a> matches only a single element, the <code>:first-child</code> selector can match more than one: one for each parent. This is equivalent to <code>:nth-child(1)</code>.</p>
   </longdesc>
   <example>
     <desc>Finds the first span in each matched div to underline and add a hover state.</desc>

entries/first-selector.xml

@@ -1,12 +1,13 @@
 <?xml version="1.0"?>
-<entry type="selector" name="first" return="">
+<entry type="selector" name="first" return="" deprecated="3.4">
   <title>:first Selector</title>
   <sample>:first</sample>
   <signature>
     <added>1.0</added>
   </signature>
   <desc>Selects the first matched DOM element.</desc>
   <longdesc>
+    <p><strong>As of jQuery 3.4</strong>, the <code>:first</code> pseudo-class is deprecated. Remove it from your selectors and filter the results later using <a href="/first/"><code>.first()</code></a>.</p>
     <p>The <code>:first</code> pseudo-class is equivalent to <code>:eq( 0 )</code>. It could also be written as <code>:lt( 1 )</code>. While this matches only a single element, <a href="/first-child-selector/">:first-child</a> can match more than one: One for each parent.</p>
   </longdesc>
   <note id="jquery-selector-extension" type="additional" data-selector=":first"/>
@@ -33,4 +34,5 @@ $( "tr:first" ).css( "font-style", "italic" );
   <category slug="selectors/basic-filter-selectors"/>
   <category slug="selectors/jquery-selector-extensions"/>
   <category slug="version/1.0"/>
+  <category slug="deprecated/deprecated-3.4"/>
 </entry>

entries/get.xml

@@ -46,7 +46,7 @@ console.log( $( "li" ).get( -1 ) );
 $( "*", document.body ).click(function( event ) {
   event.stopPropagation();
   var domElement = $( this ).get( 0 );
-  $( "span:first" ).text( "Clicked on - " + domElement.nodeName );
+  $( "span" ).first().text( "Clicked on - " + domElement.nodeName );
 });
 ]]></code>
       <css><![CDATA[

entries/gt-selector.xml

@@ -1,5 +1,5 @@
 <?xml version="1.0"?>
-<entry type="selector" name="gt" return="">
+<entry type="selector" name="gt" return="" deprecated="3.4">
   <title>:gt() Selector</title>
   <signature>
     <sample>:gt(index)</sample>
@@ -17,6 +17,7 @@
   </signature>
   <desc>Select all elements at an index greater than <code>index</code> within the matched set.</desc>
   <longdesc>
+    <p><strong>As of jQuery 3.4</strong>, the <code>:gt</code> pseudo-class is deprecated. Remove it from your selectors and filter the results later using <a href="/slice/"><code>.slice()</code></a>. For example, <code>:gt(3)</code> can be replaced with a call to <code>.slice( 4 )</code> (the provided index needs to be increased by one).</p>
     <p>
       <strong>index-related selectors</strong>
     </p>
@@ -42,4 +43,5 @@ $( "td:gt(-2)" ).css( "color", "red" );
   <category slug="selectors/basic-filter-selectors"/>
   <category slug="selectors/jquery-selector-extensions"/>
   <category slug="version/1.0"/>
+  <category slug="deprecated/deprecated-3.4"/>
 </entry>

entries/hasClass.xml

@@ -30,8 +30,8 @@ $( "#mydiv" ).hasClass( "quux" )
   <example>
     <desc>Looks for the paragraph that contains 'selected' as a class.</desc>
     <code><![CDATA[
-$( "#result1" ).append( $( "p:first" ).hasClass( "selected" ).toString() );
-$( "#result2" ).append( $( "p:last" ).hasClass( "selected" ).toString() );
+$( "#result1" ).append( $( "p" ).first().hasClass( "selected" ).toString() );
+$( "#result2" ).append( $( "p" ).last().hasClass( "selected" ).toString() );
 $( "#result3" ).append( $( "p" ).hasClass( "selected" ).toString() ) ;
 ]]></code>
     <css><![CDATA[

entries/hidden-selector.xml

@@ -29,9 +29,9 @@
 // In some browsers :hidden includes head, title, script, etc...
 var hiddenElements = $( "body" ).find( ":hidden" ).not( "script" );
 
-$( "span:first" ).text( "Found " + hiddenElements.length + " hidden elements total." );
+$( "span" ).first().text( "Found " + hiddenElements.length + " hidden elements total." );
 $( "div:hidden" ).show( 3000 );
-$( "span:last" ).text( "Found " + $( "input:hidden" ).length + " hidden inputs." );
+$( "span" ).last().text( "Found " + $( "input:hidden" ).length + " hidden inputs." );
 ]]></code>
     <css><![CDATA[
   div {

entries/hover.xml

@@ -30,7 +30,7 @@ $( "li" ).hover(
   function() {
     $( this ).append( $( "<span> ***</span>" ) );
   }, function() {
-    $( this ).find( "span:last" ).remove();
+    $( this ).find( "span" ).last().remove();
   }
 );
 

entries/index.xml

@@ -53,7 +53,7 @@ alert( "Index: " + $( "li" ).index( listItem ) );
     </p>
     <p>Note that if the jQuery collection used as the <code>.index()</code> method's argument contains more than one element, the first element within the matched set of elements will be used.</p>
     <pre><code>
-var listItems = $( "li:gt(0)" );
+var listItems = $( "li" ).slice( 1 );
 alert( "Index: " + $( "li" ).index( listItems ) );
     </code></pre>
     <p>We get back the zero-based position of the first list item within the matched set:</p>
@@ -133,7 +133,7 @@ $( "div" ).html( "Index: " + $( "li" ).index( listItem ) );
   }
 ]]></css>
     <code><![CDATA[
-var listItems = $( "li:gt(0)" );
+var listItems = $( "li" ).slice( 1 );
 $( "div" ).html( "Index: " + $( "li" ).index( listItems ) );
 ]]></code>
     <html><![CDATA[

entries/innerHeight.xml

@@ -21,8 +21,8 @@
   <example>
     <desc>Get the innerHeight of a paragraph.</desc>
     <code><![CDATA[
-var p = $( "p:first" );
-$( "p:last" ).text( "innerHeight:" + p.innerHeight() );
+var p = $( "p" ).first();
+$( "p" ).last().text( "innerHeight:" + p.innerHeight() );
 ]]></code>
     <css><![CDATA[
   p {

entries/innerWidth.xml

@@ -20,8 +20,8 @@
   <example>
     <desc>Get the innerWidth of a paragraph.</desc>
     <code><![CDATA[
-var p = $( "p:first" );
-$( "p:last" ).text( "innerWidth:" + p.innerWidth() );
+var p = $( "p" ).first();
+$( "p" ).last().text( "innerWidth:" + p.innerWidth() );
 ]]></code>
     <css><![CDATA[
   p {

entries/is.xml

@@ -49,8 +49,6 @@ $( "ul" ).click(function( event ) {
 });
     </code></pre>
     <p>Now, when the user clicks on the word "list" in the first item or anywhere in the third item, the clicked list item will be given a red background. However, when the user clicks on item 1 in the first item or anywhere in the second item, nothing will occur, because in those cases the target of the event would be <code>&lt;strong&gt;</code> or <code>&lt;span&gt;</code>, respectively.</p>
-    <p>Prior to jQuery 1.7, in selector strings with positional selectors such as <code>:first</code>, <code>:gt()</code>, or <code>:even</code>, the positional filtering is done against the jQuery object passed to <code>.is()</code>, <em>not</em> against the containing document. So for the HTML shown above, an expression such as <code>$( "li:first" ).is( "li:last" )</code> returns <code>true</code>, but <code>$( "li:first-child" ).is( "li:last-child" )</code> returns <code>false</code>. In addition, a bug in Sizzle prevented many positional selectors from working properly. These two factors made positional selectors almost unusable in filters.</p>
-    <p>Starting with jQuery 1.7, selector strings with positional selectors apply the selector against the document, and then determine whether the first element of the current jQuery set matches any of the resulting elements. So for the HTML shown above, an expression such as <code>$( "li:first" ).is( "li:last" )</code> returns <code>false</code>. Note that since positional selectors are jQuery additions and not W3C standard, we recommend using the W3C selectors whenever feasible.</p>
     <h4>Using a Function</h4>
     <p>The second form of this method evaluates expressions related to elements based on a function rather than a selector. For each element, if the function returns <code>true</code>, <code>.is()</code> returns <code>true</code> as well. For example, given a somewhat more involved HTML snippet:</p>
     <pre><code>

entries/jQuery.data.xml

@@ -34,8 +34,8 @@ jQuery.data( div, "test", {
   first: 16,
   last: "pizza!"
 });
-$( "span:first" ).text( jQuery.data( div, "test" ).first );
-$( "span:last" ).text( jQuery.data( div, "test" ).last );
+$( "span" ).first().text( jQuery.data( div, "test" ).first );
+$( "span" ).last().text( jQuery.data( div, "test" ).last );
 ]]></code>
       <css><![CDATA[
   div {

entries/jQuery.removeData.xml

@@ -19,13 +19,13 @@
     <desc>Set a data store for 2 names then remove one of them.</desc>
     <code><![CDATA[
 var div = $( "div" )[ 0 ];
-$( "span:eq(0)" ).text( "" + $( "div" ).data( "test1" ) );
+$( "span" ).eq( 0 ).text( "" + $( "div" ).data( "test1" ) );
 jQuery.data( div, "test1", "VALUE-1" );
 jQuery.data( div, "test2", "VALUE-2" );
-$( "span:eq(1)" ).text( "" + jQuery.data( div, "test1" ) );
+$( "span" ).eq( 1 ).text( "" + jQuery.data( div, "test1" ) );
 jQuery.removeData( div, "test1" );
-$( "span:eq(2)" ).text( "" + jQuery.data( div, "test1" ) );
-$( "span:eq(3)" ).text( "" + jQuery.data( div, "test2" ) );
+$( "span" ).eq( 2 ).text( "" + jQuery.data( div, "test1" ) );
+$( "span" ).eq( 3 ).text( "" + jQuery.data( div, "test2" ) );
 ]]></code>
     <css><![CDATA[
   div {

entries/jQuery.unique.xml

@@ -21,10 +21,10 @@ var divs = $( "div" ).get();
 
 // Add 3 elements of class dup too (they are divs)
 divs = divs.concat( $( ".dup" ).get() );
-$( "div:eq(1)" ).text( "Pre-unique there are " + divs.length + " elements." );
+$( "div" ).eq( 1 ).text( "Pre-unique there are " + divs.length + " elements." );
 
 divs = jQuery.unique( divs );
-$( "div:eq(2)" ).text( "Post-unique there are " + divs.length + " elements." )
+$( "div" ).eq( 2 ).text( "Post-unique there are " + divs.length + " elements." )
   .css( "color", "red" );
 ]]></code>
     <css><![CDATA[

entries/jQuery.uniqueSort.xml

@@ -21,10 +21,10 @@ var divs = $( "div" ).get();
 
 // Add 3 elements of class dup too (they are divs)
 divs = divs.concat( $( ".dup" ).get() );
-$( "div:eq(1)" ).text( "Pre-unique there are " + divs.length + " elements." );
+$( "div" ).eq( 1 ).text( "Pre-unique there are " + divs.length + " elements." );
 
 divs = jQuery.uniqueSort( divs );
-$( "div:eq(2)" ).text( "Post-unique there are " + divs.length + " elements." )
+$( "div" ).eq( 2 ).text( "Post-unique there are " + divs.length + " elements." )
   .css( "color", "red" );
 ]]></code>
     <css><![CDATA[

entries/last-child-selector.xml

@@ -7,7 +7,7 @@
   </signature>
   <desc>Selects all elements that are the last child of their parent.</desc>
   <longdesc>
-    <p>While <a href="/last-selector/">:last</a> matches only a single element, <code>:last-child</code> can match more than one: one for each parent.</p>
+    <p>While <a href="/last/"><code>.last()</code></a> matches only a single element, <code>:last-child</code> can match more than one: one for each parent.</p>
   </longdesc>
   <example>
     <desc>Find the last span in each matched div and add some css plus a hover state.</desc>