Skip to content

Commit

Permalink
Use native pseudo-selectors instead of jQuery selectors (#24713)
Browse files Browse the repository at this point in the history
  • Loading branch information
@vsn4ik @XhmikosR
vsn4ik authored and XhmikosR committed Nov 9, 2017
1 parent 75bdc6d commit 5a2d6c7
Show file tree
Hide file tree
Showing 5 changed files with 46 additions and 46 deletions.
2 changes: 1 addition & 1 deletion docs/4.0/components/alerts.md
View file
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
View file
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
View file
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
View file
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
View file
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

0 comments on commit 5a2d6c7

Please sign in to comment.