From 5a2d6c70f4115dee7edfa713f4ff2c2f2cef24da Mon Sep 17 00:00:00 2001 From: Vasilii Artemchuk Date: Thu, 9 Nov 2017 08:51:19 +0300 Subject: [PATCH] Use native pseudo-selectors instead of jQuery selectors (#24713) --- docs/4.0/components/alerts.md | 2 +- docs/4.0/components/list-group.md | 8 ++-- docs/4.0/components/navs.md | 8 ++-- js/tests/unit/carousel.js | 12 +++--- js/tests/unit/tab.js | 62 +++++++++++++++---------------- 5 files changed, 46 insertions(+), 46 deletions(-) diff --git a/docs/4.0/components/alerts.md b/docs/4.0/components/alerts.md index aa6dfbeccb..4ad1d0dea5 100644 --- a/docs/4.0/components/alerts.md +++ b/docs/4.0/components/alerts.md @@ -73,7 +73,7 @@ You can see this in action with a live demo: Enable dismissal of an alert via JavaScript: {% highlight js %} -$(".alert").alert() +$('.alert').alert() {% endhighlight %} Or with `data` attributes on a button **within the alert**, as demonstrated above: diff --git a/docs/4.0/components/list-group.md b/docs/4.0/components/list-group.md index 2d5b4f16e0..0df1ed6371 100644 --- a/docs/4.0/components/list-group.md +++ b/docs/4.0/components/list-group.md @@ -254,9 +254,9 @@ You can activate individual list item in several ways: {% highlight js %} $('#myList a[href="#profile"]').tab('show') // Select tab by name -$('#myList a:first').tab('show') // Select first tab -$('#myList a:last').tab('show') // Select last tab -$('#myList li:eq(2) a').tab('show') // Select third tab (0-indexed) +$('#myList a:first-child').tab('show') // Select first tab +$('#myList a:last-child').tab('show') // Select last tab +$('#myList a:nth-child(3)').tab('show') // Select third tab {% endhighlight %} ### Fade effect @@ -295,7 +295,7 @@ Activates a list item element and content container. Tab should have either a `d {% endhighlight %} diff --git a/docs/4.0/components/navs.md b/docs/4.0/components/navs.md index 1a22b3bcff..cdba094aa9 100644 --- a/docs/4.0/components/navs.md +++ b/docs/4.0/components/navs.md @@ -522,9 +522,9 @@ You can activate individual tabs in several ways: {% highlight js %} $('#myTab a[href="#profile"]').tab('show') // Select tab by name -$('#myTab a:first').tab('show') // Select first tab -$('#myTab a:last').tab('show') // Select last tab -$('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed) +$('#myTab li:first-child a').tab('show') // Select first tab +$('#myTab li:last-child a').tab('show') // Select last tab +$('#myTab li:nth-child(3) a').tab('show') // Select third tab {% endhighlight %} ### Fade effect @@ -574,7 +574,7 @@ Activates a tab element and content container. Tab should have either a `data-ta {% endhighlight %} diff --git a/js/tests/unit/carousel.js b/js/tests/unit/carousel.js index 521b24ca45..48752cb917 100644 --- a/js/tests/unit/carousel.js +++ b/js/tests/unit/carousel.js @@ -120,17 +120,17 @@ $(function () { .one('slide.bs.carousel', function (e) { e.preventDefault() setTimeout(function () { - assert.ok($carousel.find('.carousel-item:eq(0)').is('.active'), 'first item still active') - assert.ok($carousel.find('.carousel-indicators li:eq(0)').is('.active'), 'first indicator still active') + assert.ok($carousel.find('.carousel-item:nth-child(1)').is('.active'), 'first item still active') + assert.ok($carousel.find('.carousel-indicators li:nth-child(1)').is('.active'), 'first indicator still active') $carousel.bootstrapCarousel('next') }, 0) }) .one('slid.bs.carousel', function () { setTimeout(function () { - assert.ok(!$carousel.find('.carousel-item:eq(0)').is('.active'), 'first item still active') - assert.ok(!$carousel.find('.carousel-indicators li:eq(0)').is('.active'), 'first indicator still active') - assert.ok($carousel.find('.carousel-item:eq(1)').is('.active'), 'second item active') - assert.ok($carousel.find('.carousel-indicators li:eq(1)').is('.active'), 'second indicator active') + assert.ok(!$carousel.find('.carousel-item:nth-child(1)').is('.active'), 'first item still active') + assert.ok(!$carousel.find('.carousel-indicators li:nth-child(1)').is('.active'), 'first indicator still active') + assert.ok($carousel.find('.carousel-item:nth-child(2)').is('.active'), 'second item active') + assert.ok($carousel.find('.carousel-indicators li:nth-child(2)').is('.active'), 'second indicator active') done() }, 0) }) diff --git a/js/tests/unit/tab.js b/js/tests/unit/tab.js index 73ebbd6605..c26f076009 100644 --- a/js/tests/unit/tab.js +++ b/js/tests/unit/tab.js @@ -53,10 +53,10 @@ $(function () { $('').appendTo('#qunit-fixture') - $(tabsHTML).find('li:last a').bootstrapTab('show') + $(tabsHTML).find('li:last-child a').bootstrapTab('show') assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'profile') - $(tabsHTML).find('li:first a').bootstrapTab('show') + $(tabsHTML).find('li:first-child a').bootstrapTab('show') assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'home') }) @@ -69,10 +69,10 @@ $(function () { $('').appendTo('#qunit-fixture') - $(pillsHTML).find('li:last a').bootstrapTab('show') + $(pillsHTML).find('li:last-child a').bootstrapTab('show') assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'profile') - $(pillsHTML).find('li:first a').bootstrapTab('show') + $(pillsHTML).find('li:first-child a').bootstrapTab('show') assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'home') }) @@ -85,10 +85,10 @@ $(function () { $('
').appendTo('#qunit-fixture') - $(pillsHTML).find('li:last a').bootstrapTab('show') + $(pillsHTML).find('li:last-child a').bootstrapTab('show') assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'profile') - $(pillsHTML).find('li:first a').bootstrapTab('show') + $(pillsHTML).find('li:first-child a').bootstrapTab('show') assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'home') }) @@ -101,10 +101,10 @@ $(function () { $('').appendTo('#qunit-fixture') - $(tabsHTML).find('a:last').bootstrapTab('show') + $(tabsHTML).find('a:last-child').bootstrapTab('show') assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'profile') - $(tabsHTML).find('a:first').bootstrapTab('show') + $(tabsHTML).find('a:first-child').bootstrapTab('show') assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'home') }) @@ -117,10 +117,10 @@ $(function () { $('').appendTo('#qunit-fixture') - $(tabsHTML).find('a:last').bootstrapTab('show') + $(tabsHTML).find('a:last-child').bootstrapTab('show') assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'profile') - $(tabsHTML).find('a:first').bootstrapTab('show') + $(tabsHTML).find('a:first-child').bootstrapTab('show') assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'home') }) @@ -193,10 +193,10 @@ $(function () { + '' $(dropHTML) - .find('ul > li:first a') + .find('ul > li:first-child a') .bootstrapTab('show') .end() - .find('ul > li:last a') + .find('ul > li:last-child a') .on('show.bs.tab', function (e) { assert.strictEqual(e.relatedTarget.hash, '#1-1', 'references correct element as relatedTarget') }) @@ -217,24 +217,24 @@ $(function () { + '' $(tabsHTML) - .find('li:first a') + .find('li:first-child a') .on('hide.bs.tab', function () { assert.ok(true, 'hide event fired') }) .bootstrapTab('show') .end() - .find('li:last a') + .find('li:last-child a') .bootstrapTab('show') $(tabsHTML) - .find('li:first a') + .find('li:first-child a') .on('hidden.bs.tab', function () { assert.ok(true, 'hidden event fired') done() }) .bootstrapTab('show') .end() - .find('li:last a') + .find('li:last-child a') .bootstrapTab('show') }) @@ -248,7 +248,7 @@ $(function () { + '' $(tabsHTML) - .find('li:first a') + .find('li:first-child a') .on('hide.bs.tab', function (e) { e.preventDefault() assert.ok(true, 'hide event fired') @@ -259,7 +259,7 @@ $(function () { }) .bootstrapTab('show') .end() - .find('li:last a') + .find('li:last-child a') .bootstrapTab('show') }) @@ -273,7 +273,7 @@ $(function () { + '' $(tabsHTML) - .find('li:first a') + .find('li:first-child a') .on('hide.bs.tab', function (e) { assert.strictEqual(e.relatedTarget.hash, '#profile', 'references correct element as relatedTarget') }) @@ -283,7 +283,7 @@ $(function () { }) .bootstrapTab('show') .end() - .find('li:last a') + .find('li:last-child a') .bootstrapTab('show') }) @@ -295,19 +295,19 @@ $(function () { + '' var $tabs = $(tabsHTML).appendTo('#qunit-fixture') - $tabs.find('li:first a').bootstrapTab('show') + $tabs.find('li:first-child a').bootstrapTab('show') assert.strictEqual($tabs.find('.active').attr('aria-selected'), 'true', 'shown tab has aria-selected = true') assert.strictEqual($tabs.find('a:not(.active)').attr('aria-selected'), 'false', 'hidden tab has aria-selected = false') - $tabs.find('li:last a').trigger('click') + $tabs.find('li:last-child a').trigger('click') assert.strictEqual($tabs.find('.active').attr('aria-selected'), 'true', 'after click, shown tab has aria-selected = true') assert.strictEqual($tabs.find('a:not(.active)').attr('aria-selected'), 'false', 'after click, hidden tab has aria-selected = false') - $tabs.find('li:first a').bootstrapTab('show') + $tabs.find('li:first-child a').bootstrapTab('show') assert.strictEqual($tabs.find('.active').attr('aria-selected'), 'true', 'shown tab has aria-selected = true') assert.strictEqual($tabs.find('a:not(.active)').attr('aria-selected'), 'false', 'hidden tab has aria-selected = false') - $tabs.find('li:first a').trigger('click') + $tabs.find('li:first-child a').trigger('click') assert.strictEqual($tabs.find('.active').attr('aria-selected'), 'true', 'after second show event, shown tab still has aria-selected = true') assert.strictEqual($tabs.find('a:not(.active)').attr('aria-selected'), 'false', 'after second show event, hidden tab has aria-selected = false') }) @@ -320,9 +320,9 @@ $(function () { + '' var $tabs = $(tabsHTML).appendTo('#qunit-fixture') - $tabs.find('li:last a').trigger('click') - assert.notOk($tabs.find('li:first a').hasClass('active')) - assert.ok($tabs.find('li:last a').hasClass('active')) + $tabs.find('li:last-child a').trigger('click') + assert.notOk($tabs.find('li:first-child a').hasClass('active')) + assert.ok($tabs.find('li:last-child a').hasClass('active')) }) QUnit.test('selected tab should deactivate previous selected link in dropdown', function (assert) { @@ -339,10 +339,10 @@ $(function () { + '' var $tabs = $(tabsHTML).appendTo('#qunit-fixture') - $tabs.find('li:first > a').trigger('click') - assert.ok($tabs.find('li:first a').hasClass('active')) - assert.notOk($tabs.find('li:last > a').hasClass('active')) - assert.notOk($tabs.find('li:last > .dropdown-menu > a:first').hasClass('active')) + $tabs.find('li:first-child a').trigger('click') + assert.ok($tabs.find('li:first-child a').hasClass('active')) + assert.notOk($tabs.find('li:last-child a').hasClass('active')) + assert.notOk($tabs.find('li:last-child .dropdown-menu a:first-child').hasClass('active')) }) QUnit.test('Nested tabs', function (assert) {