Skip to content
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

Use native pseudo-selectors instead of jQuery selectors #24713

Merged
merged 3 commits into from
Nov 9, 2017
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
2 changes: 1 addition & 1 deletion docs/4.0/components/alerts.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
8 changes: 4 additions & 4 deletions docs/4.0/components/list-group.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -295,7 +295,7 @@ Activates a list item element and content container. Tab should have either a `d

<script>
$(function () {
$('#myList a:last').tab('show')
$('#myList a:last-child').tab('show')
})
</script>
{% endhighlight %}
Expand Down
8 changes: 4 additions & 4 deletions docs/4.0/components/navs.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -574,7 +574,7 @@ Activates a tab element and content container. Tab should have either a `data-ta

<script>
$(function () {
$('#myTab a:last').tab('show')
$('#myTab li:last-child a').tab('show')
})
</script>
{% endhighlight %}
Expand Down
12 changes: 6 additions & 6 deletions js/tests/unit/carousel.js
Original file line number Diff line number Diff line change
Expand Up @@ -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)
})
Expand Down
62 changes: 31 additions & 31 deletions js/tests/unit/tab.js
Original file line number Diff line number Diff line change
Expand Up @@ -53,10 +53,10 @@ $(function () {

$('<ul><li id="home"/><li id="profile"/></ul>').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')
})

Expand All @@ -69,10 +69,10 @@ $(function () {

$('<ul><li id="home"/><li id="profile"/></ul>').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')
})

Expand All @@ -85,10 +85,10 @@ $(function () {

$('<ol><li id="home"/><li id="profile"/></ol>').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')
})

Expand All @@ -101,10 +101,10 @@ $(function () {

$('<nav><div id="home"></div><div id="profile"></div></nav>').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')
})

Expand All @@ -117,10 +117,10 @@ $(function () {

$('<nav><div id="home"></div><div id="profile"></div></nav>').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')
})

Expand Down Expand Up @@ -193,10 +193,10 @@ $(function () {
+ '</ul>'

$(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')
})
Expand All @@ -217,24 +217,24 @@ $(function () {
+ '</ul>'

$(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')
})

Expand All @@ -248,7 +248,7 @@ $(function () {
+ '</ul>'

$(tabsHTML)
.find('li:first a')
.find('li:first-child a')
.on('hide.bs.tab', function (e) {
e.preventDefault()
assert.ok(true, 'hide event fired')
Expand All @@ -259,7 +259,7 @@ $(function () {
})
.bootstrapTab('show')
.end()
.find('li:last a')
.find('li:last-child a')
.bootstrapTab('show')
})

Expand All @@ -273,7 +273,7 @@ $(function () {
+ '</ul>'

$(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')
})
Expand All @@ -283,7 +283,7 @@ $(function () {
})
.bootstrapTab('show')
.end()
.find('li:last a')
.find('li:last-child a')
.bootstrapTab('show')
})

Expand All @@ -295,19 +295,19 @@ $(function () {
+ '</ul>'
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')
})
Expand All @@ -320,9 +320,9 @@ $(function () {
+ '</ul>'
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) {
Expand All @@ -339,10 +339,10 @@ $(function () {
+ '</ul>'
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) {
Expand Down