add information about valid selectors (#27137)
This commit is contained in:
parent
54d86e6249
commit
a3e45d8ced
|
@ -77,20 +77,13 @@ const Util = (($) => {
|
||||||
|
|
||||||
getSelectorFromElement(element) {
|
getSelectorFromElement(element) {
|
||||||
let selector = element.getAttribute('data-target')
|
let selector = element.getAttribute('data-target')
|
||||||
let method = 'querySelector'
|
|
||||||
|
|
||||||
if (!selector || selector === '#') {
|
if (!selector || selector === '#') {
|
||||||
selector = (element.getAttribute('href') || '').trim()
|
selector = (element.getAttribute('href') || '').trim()
|
||||||
}
|
}
|
||||||
|
|
||||||
const validSelector = selector
|
|
||||||
if (selector.charAt(0) === '#' && selector.indexOf(',') === -1) {
|
|
||||||
selector = selector.substr(1)
|
|
||||||
method = 'getElementById'
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
try {
|
||||||
return document[method](selector) ? validSelector : null
|
return document.querySelector(selector) ? selector : null
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
return null
|
return null
|
||||||
}
|
}
|
||||||
|
|
|
@ -20,31 +20,6 @@ $(function () {
|
||||||
assert.strictEqual(Util.getSelectorFromElement($el2[0]), null)
|
assert.strictEqual(Util.getSelectorFromElement($el2[0]), null)
|
||||||
})
|
})
|
||||||
|
|
||||||
QUnit.test('Util.getSelectorFromElement should use getElementById', function (assert) {
|
|
||||||
assert.expect(2)
|
|
||||||
|
|
||||||
var spy = sinon.spy(document, 'getElementById')
|
|
||||||
|
|
||||||
var $el = $('<div data-target="#7"></div>').appendTo($('#qunit-fixture'))
|
|
||||||
$('<div id="7" />').appendTo($('#qunit-fixture'))
|
|
||||||
|
|
||||||
assert.strictEqual(Util.getSelectorFromElement($el[0]), '#7')
|
|
||||||
assert.ok(spy.called)
|
|
||||||
})
|
|
||||||
|
|
||||||
QUnit.test('Util.getSelectorFromElement should use querySelector when there are multi ids', function (assert) {
|
|
||||||
assert.expect(2)
|
|
||||||
|
|
||||||
var spy = sinon.spy(document, 'querySelector')
|
|
||||||
|
|
||||||
var $el = $('<div data-target="#j7, #j8"></div>').appendTo($('#qunit-fixture'))
|
|
||||||
$('<div id="j7" />').appendTo($('#qunit-fixture'))
|
|
||||||
$('<div id="j8" />').appendTo($('#qunit-fixture'))
|
|
||||||
|
|
||||||
assert.strictEqual(Util.getSelectorFromElement($el[0]), '#j7, #j8')
|
|
||||||
assert.ok(spy.called)
|
|
||||||
})
|
|
||||||
|
|
||||||
QUnit.test('Util.typeCheckConfig should thrown an error when a bad config is passed', function (assert) {
|
QUnit.test('Util.typeCheckConfig should thrown an error when a bad config is passed', function (assert) {
|
||||||
assert.expect(1)
|
assert.expect(1)
|
||||||
var namePlugin = 'collapse'
|
var namePlugin = 'collapse'
|
||||||
|
|
|
@ -35,8 +35,10 @@ $(document).off('.alert.data-api')
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
|
|
||||||
{% capture callout %}
|
{% capture callout %}
|
||||||
##### Escaping selectors
|
## Selectors
|
||||||
If you use special selectors, for example: `collapse:Example`, be sure to escape them, because they'll be passed through jQuery.
|
|
||||||
|
Currently to query DOM elements we use the native methods `querySelector` and `querySelectorAll` for performance reasons, so you have to use [valid selectors](https://www.w3.org/TR/CSS21/syndata.html#value-def-identifier).
|
||||||
|
If you use special selectors, for example: `collapse:Example` be sure to escape them.
|
||||||
{% endcapture %}
|
{% endcapture %}
|
||||||
{% include callout.html content=callout type="warning" %}
|
{% include callout.html content=callout type="warning" %}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue