Skip to content

Commit 0c860b0

Browse files
mgolmgol
authored
All: Remove usage of jQuery positional selectors
jQuery positional selectors () have been deprecated in [jQuery 3.4.0](https://blog.jquery.com/2019/04/10/jquery-3-4-0-released/) and they'll be removed in jQuery 4.0.0. This PR removes their usage. Most of the changes were possible without changing public API. However, dropping `:even` usage required a change to the [`header` option](https://api.jqueryui.com/accordion/#option-header) of the accordion widget. I made it an optional function; this will need to be documented. The polyfill for `.even()` & `.odd()` is added for jQuery <3.5.0. There was no usage of the :odd selector in the code but the `.odd()` method is also polyfilled for completeness. Closes gh-1904
1 parent 3481f50 commit 0c860b0

File tree

23 files changed

+193
-148
lines changed

23 files changed

+193
-148
lines changed

‎demos/position/cycler.html

+12-12
Original file line numberDiff line numberDiff line change
@@ -49,24 +49,24 @@
4949
});
5050
}
5151

52-
left( $( "img:eq(0)" ) );
53-
center( $( "img:eq(1)" ) );
54-
right( $( "img:eq(2)" ) );
52+
left( $( "img" ).eq( 0 ) );
53+
center( $( "img" ).eq( 1 ) );
54+
right( $( "img" ).eq( 2 ) );
5555

5656
function animate( to ) {
5757
$( this ).stop( true, false ).animate( to );
5858
}
5959
function next( event ) {
6060
event.preventDefault();
61-
center( $( "img:eq(2)" ), animate );
62-
left( $( "img:eq(1)" ), animate );
63-
right( $( "img:eq(0)" ).appendTo( "#container" ) );
61+
center( $( "img" ).eq( 2 ), animate );
62+
left( $( "img" ).eq( 1 ), animate );
63+
right( $( "img" ).eq( 0 ).appendTo( "#container" ) );
6464
}
6565
function previous( event ) {
6666
event.preventDefault();
67-
center( $( "img:eq(0)" ), animate );
68-
right( $( "img:eq(1)" ), animate );
69-
left( $( "img:eq(2)" ).prependTo( "#container" ) );
67+
center( $( "img" ).eq( 0 ), animate );
68+
right( $( "img" ).eq( 1 ), animate );
69+
left( $( "img" ).eq( 2 ).prependTo( "#container" ) );
7070
}
7171
$( "#previous" ).on( "click", previous );
7272
$( "#next" ).on( "click", next );
@@ -76,9 +76,9 @@
7676
});
7777

7878
$( window ).on( "resize", function() {
79-
left( $( "img:eq(0)" ), animate );
80-
center( $( "img:eq(1)" ), animate );
81-
right( $( "img:eq(2)" ), animate );
79+
left( $( "img" ).eq( 0 ), animate );
80+
center( $( "img" ).eq( 1 ), animate );
81+
right( $( "img" ).eq( 2 ), animate );
8282
});
8383
</script>
8484
</head>

‎tests/lib/bootstrap.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -172,8 +172,11 @@ function migrateUrl() {
172172
}
173173
}
174174

175+
var jQueryVersion = parseUrl().jquery;
176+
175177
// Load the jQuery fixes, if necessary
176-
if ( parseFloat( parseUrl().jquery ) < 3 ) {
178+
if ( !jQueryVersion ||
179+
( jQueryVersion.indexOf( "git" ) === -1 && parseFloat( jQueryVersion ) < 4 ) ) {
177180
modules.unshift( "ui/jquery-1-7" );
178181
}
179182

‎tests/unit/accordion/common.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,9 @@ common.testWidget( "accordion", {
1515
collapsible: false,
1616
disabled: false,
1717
event: "click",
18-
header: "> li > :first-child, > :not(li):even",
18+
header: function( elem ) {
19+
return elem.find( "> li > :first-child" ).add( elem.find( "> :not(li)" ).even() );
20+
},
1921
heightStyle: "auto",
2022
icons: {
2123
"activeHeader": "ui-icon-triangle-1-s",

‎tests/unit/accordion/core.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ $.each( { div: "#list1", ul: "#navigation", dl: "#accordion-dl" }, function( typ
3939
QUnit.test( "handle click on header-descendant", function( assert ) {
4040
assert.expect( 1 );
4141
var element = $( "#navigation" ).accordion();
42-
$( "#navigation h2:eq(1) a" ).trigger( "click" );
42+
$( "#navigation h2" ).eq( 1 ).find( "a" ).trigger( "click" );
4343
state( assert, element, 0, 1, 0 );
4444
} );
4545

‎tests/unit/accordion/options.js

+19-3
Original file line numberDiff line numberDiff line change
@@ -376,15 +376,15 @@ QUnit.test( "{ event: custom }", function( assert ) {
376376
QUnit.test( "{ header: default }", function( assert ) {
377377
assert.expect( 2 );
378378

379-
// Default: > li > :first-child,> :not(li):even
380-
// > :not(li):even
379+
// Default: elem.find( "> li > :first-child" ).add( elem.find( "> :not(li)" ).even() )
380+
// elem.find( "> :not(li)" ).even()
381381
state( assert, $( "#list1" ).accordion(), 1, 0, 0 );
382382

383383
// > li > :first-child
384384
state( assert, $( "#navigation" ).accordion(), 1, 0, 0 );
385385
} );
386386

387-
QUnit.test( "{ header: custom }", function( assert ) {
387+
QUnit.test( "{ header: customString }", function( assert ) {
388388
assert.expect( 6 );
389389
var element = $( "#navigationWrapper" ).accordion( {
390390
header: "h2"
@@ -398,6 +398,22 @@ QUnit.test( "{ header: custom }", function( assert ) {
398398
state( assert, element, 0, 0, 1 );
399399
} );
400400

401+
QUnit.test( "{ header: customFunction }", function( assert ) {
402+
assert.expect( 6 );
403+
var element = $( "#navigationWrapper" ).accordion( {
404+
header: function( elem ) {
405+
return elem.find( "h2" );
406+
}
407+
} );
408+
element.find( "h2" ).each( function() {
409+
assert.hasClasses( this, "ui-accordion-header" );
410+
} );
411+
assert.equal( element.find( ".ui-accordion-header" ).length, 3 );
412+
state( assert, element, 1, 0, 0 );
413+
element.accordion( "option", "active", 2 );
414+
state( assert, element, 0, 0, 1 );
415+
} );
416+
401417
QUnit.test( "{ heightStyle: 'auto' }", function( assert ) {
402418
assert.expect( 3 );
403419
var element = $( "#navigation" ).accordion( { heightStyle: "auto" } );

‎tests/unit/datepicker/core.js

+49-49
Original file line numberDiff line numberDiff line change
@@ -51,33 +51,33 @@ QUnit.test( "baseStructure", function( assert ) {
5151
assert.ok( !dp.is( ".ui-datepicker-multi" ), "Structure - not multi-month" );
5252
assert.equal( dp.children().length, 2, "Structure - child count" );
5353

54-
header = dp.children( ":first" );
54+
header = dp.children().first();
5555
assert.ok( header.is( "div.ui-datepicker-header" ), "Structure - header division" );
5656
assert.equal( header.children().length, 3, "Structure - header child count" );
57-
assert.ok( header.children( ":first" ).is( "a.ui-datepicker-prev" ) && header.children( ":first" ).html() !== "", "Structure - prev link" );
58-
assert.ok( header.children( ":eq(1)" ).is( "a.ui-datepicker-next" ) && header.children( ":eq(1)" ).html() !== "", "Structure - next link" );
57+
assert.ok( header.children().first().is( "a.ui-datepicker-prev" ) && header.children().first().html() !== "", "Structure - prev link" );
58+
assert.ok( header.children().eq( 1 ).is( "a.ui-datepicker-next" ) && header.children().eq ( 1 ).html() !== "", "Structure - next link" );
5959

60-
title = header.children( ":last" );
60+
title = header.children().last();
6161
assert.ok( title.is( "div.ui-datepicker-title" ) && title.html() !== "", "Structure - title division" );
6262
assert.equal( title.children().length, 2, "Structure - title child count" );
63-
assert.ok( title.children( ":first" ).is( "span.ui-datepicker-month" ) && title.children( ":first" ).text() !== "", "Structure - month text" );
64-
assert.ok( title.children( ":last" ).is( "span.ui-datepicker-year" ) && title.children( ":last" ).text() !== "", "Structure - year text" );
63+
assert.ok( title.children().first().is( "span.ui-datepicker-month" ) && title.children().first().text() !== "", "Structure - month text" );
64+
assert.ok( title.children().last().is( "span.ui-datepicker-year" ) && title.children().last().text() !== "", "Structure - year text" );
6565

66-
table = dp.children( ":eq(1)" );
66+
table = dp.children().eq( 1 );
6767
assert.ok( table.is( "table.ui-datepicker-calendar" ), "Structure - month table" );
68-
assert.ok( table.children( ":first" ).is( "thead" ), "Structure - month table thead" );
68+
assert.ok( table.children().first().is( "thead" ), "Structure - month table thead" );
6969

70-
thead = table.children( ":first" ).children( ":first" );
70+
thead = table.children().first().children().first();
7171
assert.ok( thead.is( "tr" ), "Structure - month table title row" );
7272
assert.equal( thead.find( "th" ).length, 7, "Structure - month table title cells" );
73-
assert.ok( table.children( ":eq(1)" ).is( "tbody" ), "Structure - month table body" );
74-
assert.ok( table.children( ":eq(1)" ).children( "tr" ).length >= 4, "Structure - month table week count" );
73+
assert.ok( table.children().eq( 1 ).is( "tbody" ), "Structure - month table body" );
74+
assert.ok( table.children().eq( 1 ).children( "tr" ).length >= 4, "Structure - month table week count" );
7575

76-
week = table.children( ":eq(1)" ).children( ":first" );
76+
week = table.children().eq( 1 ).children().first();
7777
assert.ok( week.is( "tr" ), "Structure - month table week row" );
7878
assert.equal( week.children().length, 7, "Structure - week child count" );
79-
assert.ok( week.children( ":first" ).is( "td.ui-datepicker-week-end" ), "Structure - month table first day cell" );
80-
assert.ok( week.children( ":last" ).is( "td.ui-datepicker-week-end" ), "Structure - month table second day cell" );
79+
assert.ok( week.children().first().is( "td.ui-datepicker-week-end" ), "Structure - month table first day cell" );
80+
assert.ok( week.children().last().is( "td.ui-datepicker-week-end" ), "Structure - month table second day cell" );
8181

8282
inp.datepicker( "hide" ).datepicker( "destroy" );
8383
step2();
@@ -94,14 +94,14 @@ QUnit.test( "baseStructure", function( assert ) {
9494
} );
9595
testHelper.onFocus( inp, function() {
9696
title = dp.find( "div.ui-datepicker-title" );
97-
assert.ok( title.children( ":first" ).is( "select.ui-datepicker-month" ), "Structure - month selector" );
98-
assert.ok( title.children( ":last" ).is( "select.ui-datepicker-year" ), "Structure - year selector" );
97+
assert.ok( title.children().first().is( "select.ui-datepicker-month" ), "Structure - month selector" );
98+
assert.ok( title.children().last().is( "select.ui-datepicker-year" ), "Structure - year selector" );
9999

100-
panel = dp.children( ":last" );
100+
panel = dp.children().last();
101101
assert.ok( panel.is( "div.ui-datepicker-buttonpane" ), "Structure - button panel division" );
102102
assert.equal( panel.children().length, 2, "Structure - button panel child count" );
103-
assert.ok( panel.children( ":first" ).is( "button.ui-datepicker-current" ), "Structure - today button" );
104-
assert.ok( panel.children( ":last" ).is( "button.ui-datepicker-close" ), "Structure - close button" );
103+
assert.ok( panel.children().first().is( "button.ui-datepicker-current" ), "Structure - today button" );
104+
assert.ok( panel.children().last().is( "button.ui-datepicker-close" ), "Structure - close button" );
105105

106106
inp.datepicker( "hide" ).datepicker( "destroy" );
107107
step3();
@@ -116,13 +116,13 @@ QUnit.test( "baseStructure", function( assert ) {
116116
assert.ok( dp.is( ".ui-datepicker-multi" ), "Structure multi [2] - multi-month" );
117117
assert.equal( dp.children().length, 3, "Structure multi [2] - child count" );
118118

119-
child = dp.children( ":first" );
119+
child = dp.children().first();
120120
assert.ok( child.is( "div.ui-datepicker-group" ) && child.is( "div.ui-datepicker-group-first" ), "Structure multi [2] - first month division" );
121121

122-
child = dp.children( ":eq(1)" );
122+
child = dp.children().eq( 1 );
123123
assert.ok( child.is( "div.ui-datepicker-group" ) && child.is( "div.ui-datepicker-group-last" ), "Structure multi [2] - second month division" );
124124

125-
child = dp.children( ":eq(2)" );
125+
child = dp.children().eq( 2 );
126126
assert.ok( child.is( "div.ui-datepicker-row-break" ), "Structure multi [2] - row break" );
127127
assert.ok( dp.is( ".ui-datepicker-multi-2" ), "Structure multi [2] - multi-2" );
128128

@@ -152,22 +152,22 @@ QUnit.test( "baseStructure", function( assert ) {
152152
assert.ok( dp.is( ".ui-datepicker-multi" ), "Structure multi - multi-month" );
153153
assert.equal( dp.children().length, 6, "Structure multi [2,2] - child count" );
154154

155-
child = dp.children( ":first" );
155+
child = dp.children().first();
156156
assert.ok( child.is( "div.ui-datepicker-group" ) && child.is( "div.ui-datepicker-group-first" ), "Structure multi [2,2] - first month division" );
157157

158-
child = dp.children( ":eq(1)" );
158+
child = dp.children().eq( 1 );
159159
assert.ok( child.is( "div.ui-datepicker-group" ) && child.is( "div.ui-datepicker-group-last" ), "Structure multi [2,2] - second month division" );
160160

161-
child = dp.children( ":eq(2)" );
161+
child = dp.children().eq( 2 );
162162
assert.ok( child.is( "div.ui-datepicker-row-break" ), "Structure multi [2,2] - row break" );
163163

164-
child = dp.children( ":eq(3)" );
164+
child = dp.children().eq( 3 );
165165
assert.ok( child.is( "div.ui-datepicker-group" ) && child.is( "div.ui-datepicker-group-first" ), "Structure multi [2,2] - third month division" );
166166

167-
child = dp.children( ":eq(4)" );
167+
child = dp.children().eq( 4 );
168168
assert.ok( child.is( "div.ui-datepicker-group" ) && child.is( "div.ui-datepicker-group-last" ), "Structure multi [2,2] - fourth month division" );
169169

170-
child = dp.children( ":eq(5)" );
170+
child = dp.children().eq( 5 );
171171
assert.ok( child.is( "div.ui-datepicker-row-break" ), "Structure multi [2,2] - row break" );
172172

173173
inp.datepicker( "hide" ).datepicker( "destroy" );
@@ -181,14 +181,14 @@ QUnit.test( "baseStructure", function( assert ) {
181181
assert.ok( !dp.is( ".ui-datepicker-multi" ), "Structure inline - not multi-month" );
182182
assert.equal( dp.children().length, 2, "Structure inline - child count" );
183183

184-
header = dp.children( ":first" );
184+
header = dp.children().first();
185185
assert.ok( header.is( "div.ui-datepicker-header" ), "Structure inline - header division" );
186186
assert.equal( header.children().length, 3, "Structure inline - header child count" );
187187

188-
table = dp.children( ":eq(1)" );
188+
table = dp.children().eq( 1 );
189189
assert.ok( table.is( "table.ui-datepicker-calendar" ), "Structure inline - month table" );
190-
assert.ok( table.children( ":first" ).is( "thead" ), "Structure inline - month table thead" );
191-
assert.ok( table.children( ":eq(1)" ).is( "tbody" ), "Structure inline - month table body" );
190+
assert.ok( table.children().first().is( "thead" ), "Structure inline - month table thead" );
191+
assert.ok( table.children().eq( 1 ).is( "tbody" ), "Structure inline - month table body" );
192192

193193
inl.datepicker( "destroy" );
194194

@@ -199,13 +199,13 @@ QUnit.test( "baseStructure", function( assert ) {
199199
assert.ok( dp.is( ".ui-datepicker-inline" ) && dp.is( ".ui-datepicker-multi" ), "Structure inline multi - main div" );
200200
assert.equal( dp.children().length, 3, "Structure inline multi - child count" );
201201

202-
child = dp.children( ":first" );
202+
child = dp.children().first();
203203
assert.ok( child.is( "div.ui-datepicker-group" ) && child.is( "div.ui-datepicker-group-first" ), "Structure inline multi - first month division" );
204204

205-
child = dp.children( ":eq(1)" );
205+
child = dp.children().eq( 1 );
206206
assert.ok( child.is( "div.ui-datepicker-group" ) && child.is( "div.ui-datepicker-group-last" ), "Structure inline multi - second month division" );
207207

208-
child = dp.children( ":eq(2)" );
208+
child = dp.children().eq( 2 );
209209
assert.ok( child.is( "div.ui-datepicker-row-break" ), "Structure inline multi - row break" );
210210

211211
inl.datepicker( "destroy" );
@@ -229,17 +229,17 @@ QUnit.test( "customStructure", function( assert ) {
229229
testHelper.onFocus( inp, function() {
230230
assert.ok( dp.is( ".ui-datepicker-rtl" ), "Structure RTL - right-to-left" );
231231

232-
header = dp.children( ":first" );
232+
header = dp.children().first();
233233
assert.ok( header.is( "div.ui-datepicker-header" ), "Structure RTL - header division" );
234234
assert.equal( header.children().length, 3, "Structure RTL - header child count" );
235-
assert.ok( header.children( ":first" ).is( "a.ui-datepicker-next" ), "Structure RTL - prev link" );
236-
assert.ok( header.children( ":eq(1)" ).is( "a.ui-datepicker-prev" ), "Structure RTL - next link" );
235+
assert.ok( header.children().first().is( "a.ui-datepicker-next" ), "Structure RTL - prev link" );
236+
assert.ok( header.children().eq( 1 ).is( "a.ui-datepicker-prev" ), "Structure RTL - next link" );
237237

238-
panel = dp.children( ":last" );
238+
panel = dp.children().last();
239239
assert.ok( panel.is( "div.ui-datepicker-buttonpane" ), "Structure RTL - button division" );
240240
assert.equal( panel.children().length, 2, "Structure RTL - button panel child count" );
241-
assert.ok( panel.children( ":first" ).is( "button.ui-datepicker-close" ), "Structure RTL - close button" );
242-
assert.ok( panel.children( ":last" ).is( "button.ui-datepicker-current" ), "Structure RTL - today button" );
241+
assert.ok( panel.children().first().is( "button.ui-datepicker-close" ), "Structure RTL - close button" );
242+
assert.ok( panel.children().last().is( "button.ui-datepicker-current" ), "Structure RTL - today button" );
243243

244244
inp.datepicker( "hide" ).datepicker( "destroy" );
245245
step2();
@@ -256,10 +256,10 @@ QUnit.test( "customStructure", function( assert ) {
256256
inp.val( "02/10/2008" );
257257

258258
testHelper.onFocus( inp, function() {
259-
header = dp.children( ":first" );
259+
header = dp.children().first();
260260
assert.ok( header.is( "div.ui-datepicker-header" ), "Structure hide prev/next - header division" );
261261
assert.equal( header.children().length, 1, "Structure hide prev/next - links child count" );
262-
assert.ok( header.children( ":first" ).is( "div.ui-datepicker-title" ), "Structure hide prev/next - title division" );
262+
assert.ok( header.children().first().is( "div.ui-datepicker-title" ), "Structure hide prev/next - title division" );
263263

264264
inp.datepicker( "hide" ).datepicker( "destroy" );
265265
step3();
@@ -271,10 +271,10 @@ QUnit.test( "customStructure", function( assert ) {
271271
inp = testHelper.initNewInput( { changeMonth: true } );
272272

273273
testHelper.onFocus( inp, function() {
274-
title = dp.children( ":first" ).children( ":last" );
274+
title = dp.children().first().children().last();
275275
assert.equal( title.children().length, 2, "Structure changeable month - title child count" );
276-
assert.ok( title.children( ":first" ).is( "select.ui-datepicker-month" ), "Structure changeable month - month selector" );
277-
assert.ok( title.children( ":last" ).is( "span.ui-datepicker-year" ), "Structure changeable month - read-only year" );
276+
assert.ok( title.children().first().is( "select.ui-datepicker-month" ), "Structure changeable month - month selector" );
277+
assert.ok( title.children().last().is( "span.ui-datepicker-year" ), "Structure changeable month - read-only year" );
278278

279279
inp.datepicker( "hide" ).datepicker( "destroy" );
280280
step4();
@@ -286,10 +286,10 @@ QUnit.test( "customStructure", function( assert ) {
286286
inp = testHelper.initNewInput( { changeYear: true } );
287287

288288
testHelper.onFocus( inp, function() {
289-
title = dp.children( ":first" ).children( ":last" );
289+
title = dp.children().first().children().last();
290290
assert.equal( title.children().length, 2, "Structure changeable year - title child count" );
291-
assert.ok( title.children( ":first" ).is( "span.ui-datepicker-month" ), "Structure changeable year - read-only month" );
292-
assert.ok( title.children( ":last" ).is( "select.ui-datepicker-year" ), "Structure changeable year - year selector" );
291+
assert.ok( title.children().first().is( "span.ui-datepicker-month" ), "Structure changeable year - read-only month" );
292+
assert.ok( title.children().last().is( "select.ui-datepicker-year" ), "Structure changeable year - year selector" );
293293

294294
inp.datepicker( "hide" ).datepicker( "destroy" );
295295
step5();

0 commit comments

Comments
 (0)