Как проверить существование элемента в jQuery?
Текущий код, который у меня есть, выглядит следующим образом:
if ($(selector).length > 0) {
// Do something
}
Есть ли более элегантный способ решения этой задачи? Возможно, плагин или функция?
Да!
jQuery.fn.exists = function(){ return this.length > 0; }
if ($(selector).exists()) {
// Do something
}
Это в ответ на: подкаст Herding Code с Джеффом Этвудом
Если вы использовали
jQuery.fn.exists = function(){return ($(this).length > 0);}
if ($(selector).exists()) { }
вы бы подразумевали, что цепочка возможна, хотя это не так.
Так было бы лучше:
jQuery.exists = function(selector) {return ($(selector).length > 0);}
if ($.exists(selector)) { }
Альтернативный вариант из FAQ:
if ( $('#myDiv').length ) { /* Do something */ }
Вы также можете использовать следующее. Если в массиве объектов jQuery нет значений, то получение первого элемента в массиве вернет неопределенное значение.
if ( $('#myDiv')[0] ) { /* Do something */ }
Самым быстрым и наиболее семантически сам объяснение способа проверить на существование является на самом деле при помощи равнины 'JavaScript':
if (document.getElementById('element_id')) {
// Do something
}
Это немного более длинно, чтобы написать, чем альтернатива длины jQuery, но выполняет быстрее, так как это - родной метод JS.
И это лучше, чем альтернатива для написания Вашей собственной функции 'jQuery'. Та альтернатива медленнее по причинам @snover указанный. Но это также произвело бы другим программистам впечатление, которое 'существует ()' функция, что-то врожденное к jQuery. 'JavaScript'/должен быть понятым под другими, редактирующими Ваш кодекс без увеличенного долга знаний.
NB: Заметьте отсутствие ' #' перед 'element_id' (так как это - простой JS, не 'jQuery').
Вы можете спасти несколько байтов, сочиняя:
if ($(selector)[0]) { ... }
Это работает, потому что каждый объект jQuery также притворяется множеством, таким образом, мы можем использовать множество dereferencing оператор, чтобы получить первый пункт от array. Это возвращается 'неопределенный', если нет никакого пункта в указанном индексе.
Этот плагин может использоваться в, 'если' заявление как, 'если ($ (ele) .exist ()) {/ ДЕЙСТВИТЕЛЬНО РАБОТАЮТ /}' или использование отзыва.
Плагин ## ##
;;(function($) {
if (!$.exist) {
$.extend({
exist: function() {
var ele, cbmExist, cbmNotExist;
if (arguments.length) {
for (x in arguments) {
switch (typeof arguments[x]) {
case 'function':
if (typeof cbmExist == "undefined") cbmExist = arguments[x];
else cbmNotExist = arguments[x];
break;
case 'object':
if (arguments[x] instanceof jQuery) ele = arguments[x];
else {
var obj = arguments[x];
for (y in obj) {
if (typeof obj[y] == 'function') {
if (typeof cbmExist == "undefined") cbmExist = obj[y];
else cbmNotExist = obj[y];
}
if (typeof obj[y] == 'object' && obj[y] instanceof jQuery) ele = obj[y];
if (typeof obj[y] == 'string') ele = $(obj[y]);
}
}
break;
case 'string':
ele = $(arguments[x]);
break;
}
}
}
if (typeof cbmExist == 'function') {
var exist = ele.length > 0 ? true : false;
if (exist) {
return ele.each(function(i) { cbmExist.apply(this, [exist, ele, i]); });
}
else if (typeof cbmNotExist == 'function') {
cbmNotExist.apply(ele, [exist, ele]);
return ele;
}
else {
if (ele.length <= 1) return ele.length > 0 ? true : false;
else return ele.length;
}
}
else {
if (ele.length <= 1) return ele.length > 0 ? true : false;
else return ele.length;
}
return false;
}
});
$.fn.extend({
exist: function() {
var args = [$(this)];
if (arguments.length) for (x in arguments) args.push(arguments[x]);
return $.exist.apply($, args);
}
});
}
})(jQuery);
[jsFiddle] (
)Вы можете определить один или два отзыва. Первый будет стрелять, если элемент будет существовать, второй будет стрелять, если элемент сделает не, существуют. Однако, если Вы примете решение передать только одну функцию, она будет только стрелять, когда элемент будет существовать. Таким образом цепь умрет, если отобранный элемент сделает не, существуют. Конечно, если это действительно будет существовать, первая функция будет стрелять, и цепь продолжится.
Следует иметь в виду, что, используя вариант отзыва помогает поддержать chainability – элемент возвращен, и Вы можете продолжить приковывать команды цепью как с любым другим методом jQuery!
Пример ## использует ##
if ($.exist('#eleID')) { /* DO WORK */ } // param as STRING
if ($.exist($('#eleID'))) { /* DO WORK */ } // param as jQuery OBJECT
if ($('#eleID').exist()) { /* DO WORK */ } // enduced on jQuery OBJECT
$.exist('#eleID', function() { // param is STRING && CALLBACK METHOD
/* DO WORK */
/* This will ONLY fire if the element EXIST */
}, function() { // param is STRING && CALLBACK METHOD
/* DO WORK */
/* This will ONLY fire if the element DOES NOT EXIST */
})
$('#eleID').exist(function() { // enduced on jQuery OBJECT with CALLBACK METHOD
/* DO WORK */
/* This will ONLY fire if the element EXIST */
})
$.exist({ // param is OBJECT containing 2 key|value pairs: element = STRING, callback = METHOD
element: '#eleID',
callback: function() {
/* DO WORK */
/* This will ONLY fire if the element EXIST */
}
})
Я вижу, что большинство ответов вот не точно , как они должны быть, они проверяют длину элемента, это может быть хорошо во многих случаях, но не 100% , вообразить, если проход числа в функцию вместо этого, таким образом, я моделирую функцию, которые проверяют все условия и дают ответ, как это должно быть:
$.fn.exists = $.fn.exists || function() {
return !!(this.length && (this[0] instanceof HTMLDocument || this[0] instanceof HTMLElement));
}
Это проверит и длину и тип, Теперь Вы можете проверить его этот путь:
$(1980).exists(); //return false
$([1,2,3]).exists(); //return false
$({name: 'stackoverflow', url: 'http://www.stackoverflow.com'}).exists(); //return false
$([{nodeName: 'foo'}]).exists() // returns false
$('div').exists(); //return true
$('.header').exists(); //return true
$(document).exists(); //return true
$('body').exists(); //return true
There' s никакая потребность в jQuery действительно. С равниной JavaScript it' s легче и семантически исправляют, чтобы проверить на:
if(document.getElementById("myElement")) {
//Do something...
}
Если по любой причине Вы don' t хотят поместить id в элемент, Вы можете все еще использовать любой другой метод JavaScript, разработанный, чтобы получить доступ к DOM.
jQuery действительно прохладен, но don' t позволяют чистому JavaScript попасть в забвение...
Причина все предыдущие ответы требуют '.length' параметр, состоит в том, что они главным образом используют jquery' s '$ ()' отборщик, у которого есть querySelectorAll позади занавесок (или они используют его непосредственно). Этот метод довольно медленный, потому что он должен разобрать весь поиск дерева DOM , все соответствуют тому отборщику и заселению множества с ними.
[' length'] параметр не нужен или полезен, и кодекс будет намного быстрее, если Вы непосредственно будете использовать 'document.querySelector (отборщик)' вместо этого, потому что это возвращает первый элемент, которому это соответствует или пустой указатель если не найденный.
function elementIfExists(selector){ //named this way on purpose, see below
return document.querySelector(selector);
}
/* usage: */
var myelement = elementIfExists("#myid") || myfallbackelement;
Однако этот метод оставляет нас с фактическим объектом возвращенными; который прекрасен если это isn' t собирающийся сохраняться как переменная и неоднократно использоваться (таким образом имеющий в наличии ссылку, если мы забываем).
var myel=elementIfExists("#myid");
// now we are using a reference to the element which will linger after removal
myel.getParentNode.removeChild(myel);
console.log(elementIfExists("#myid")); /* null */
console.log(myel); /* giant table lingering around detached from document */
myel=null; /* now it can be garbage collected */
В некоторых случаях это может быть желаемо. Это может использоваться в для петли как это:
/* locally scoped myel gets garbage collected even with the break; */
for (var myel; myel = elementIfExist(sel); myel.getParentNode.removeChild(myel))
if (myel == myblacklistedel) break;
Если Вы don' t на самом деле нуждаюсь в элементе и хочу получать/хранить просто истинное/ложное, просто удвоить не его!! Это работает на обувь, которая прибывает развязанная, итак, почему узел сюда?
function elementExists(selector){
return !!document.querySelector(selector);
}
/* usage: */
var hastables = elementExists("table"); /* will be true or false */
if (hastables){
/* insert css style sheet for our pretty tables */
}
setTimeOut(function (){if (hastables && !elementExists("#mytablecss"))
alert("bad table layouts");},3000);
[' $ .contains ()'] (http://api.jquery.com/jQuery.contains/), что Вы хотите?
'jQuery.contains (контейнер, содержавший)'
'$ .contains ()' прибыль метода, верная, если элемент DOM, обеспеченный вторым аргументом, является потомком элемента DOM, обеспеченного первым аргументом, является ли это прямым ребенком или вложенный более глубоко. Иначе это возвращается ложный. Только узлы элемента поддержаны; если вторым аргументом будет узел текста или комментария, то '$ .contains ()' возвратится ложный.
Примечание : первый аргумент должен быть элементом DOM, не объектом jQuery или равниной объект JavaScript.
Я нашел 'если ($ (отборщик) .length) {}' быть недостаточным. Это тихо сломает Ваше приложение, когда 'отборщик' будет пустым объектом '{}'.
var $target = $({});
console.log($target, $target.length);
// Console output:
// -------------------------------------
// [▼ Object ] 1
// ► __proto__: Object
Мое единственное предложение должно выполнить дополнительную проверку для '{}'.
if ($.isEmptyObject(selector) || !$(selector).length) {
throw new Error('Unable to work with the given selector.');
}
I' m, все еще ища лучшее решение, хотя, поскольку этот немного тяжел.
Отредактируйте: ПРЕДУПРЕЖДЕНИЕ! Этот doesn' t работают в IE, когда 'отборщик' - последовательность.
$.isEmptyObject('hello') // FALSE in Chrome and TRUE in IE
Вы можете проверить, что элемент присутствует или не использование длины в явском сценарии. Если длина больше, чем ноль тогда, элемент присутствует, если длина - ноль тогда элемент не присутствует
// These by Id
if( $('#elementid').length > 0){
// Element is Present
}else{
// Element is not Present
}
// These by Class
if( $('.elementClass').length > 0){
// Element is Present
}else{
// Element is not Present
}
[Проверка существование элемента] (https://learn.jquery.com/using-jquery-core/faq/how-do-i-test-whether-an-element-exists/) зарегистрирована аккуратно на самом официальном веб-сайте jQuery!
Используйте [.length] (https://api.jquery.com/length/) собственность коллекции jQuery, возвращенной Вашим отборщик:
если ($ (" #myDiv") .length) { $ (" #myDiv") .show (); }
Обратите внимание что это isn' t всегда необходимый для теста, существует ли элемент. следующий кодекс покажет элемент, если это будет существовать, и ничего не сделайте (без ошибок), если это не делает:
$ (" #myDiv") .show ();
это очень похоже на все ответы, но почему бы не использовать'!' оператор дважды, таким образом, Вы можете получить булево:
jQuery.fn.exists = function(){return !!this.length};
if ($(selector).exists()) {
// the element exists, now what?...
}
Попытайтесь проверить на элемент 'DOM'
if (!!$(selector)[0]) // do stuff
Вдохновленный [hiway' s ответ] (https://stackoverflow.com/a/19533724/177710) я придумал следующее:
$.fn.exists = function() {
return $.contains( document.documentElement, this[0] );
}
[jQuery.contains] (http://api.jquery.com/jQuery.contains/) берет два элемента DOM и проверки, содержит ли первый второй.
Используя 'document.documentElement', поскольку первый аргумент выполняет семантику, 'существует' метод, когда мы хотим применить его только, чтобы проверить существование элемента в текущем документе.
Ниже, I' ve соединяют отрывок, который выдерживает сравнение 'jQuery.exists ()' по отношению к '$ (sel) [0]' и '$ (sel) .length' подходы, которые оба возвращения 'truthy' оценивают за '$ (4)' в то время как '$ (4) .exists ()' 'ложная' прибыль. В контексте проверяющий на существование элемента в DOM это, кажется, желаемый результат .
<! - начинают отрывок: js скрываются: верный - >
$.fn.exists = function() {
return $.contains(document.documentElement, this[0]);
}
var testFuncs = [
function(jq) { return !!jq[0]; },
function(jq) { return !!jq.length; },
function(jq) { return jq.exists(); },
];
var inputs = [
["$()",$()],
["$(4)",$(4)],
["$('#idoexist')",$('#idoexist')],
["$('#idontexist')",$('#idontexist')]
];
for( var i = 0, l = inputs.length, tr, input; i < l; i++ ) {
input = inputs[i][1];
tr = "<tr><td>" + inputs[i][0] + "</td><td>"
+ testFuncs[0](input) + "</td><td>"
+ testFuncs[1](input) + "</td><td>"
+ testFuncs[2](input) + "</td></tr>";
$("table").append(tr);
}
td { border: 1px solid black }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="idoexist">#idoexist</div>
<table style>
<tr>
<td>Input</td><td>!!$(sel)[0]</td><td>!!$(sel).length</td><td>$(sel).exists()</td>
</tr>
</table>
<script>
$.fn.exists = function() {
return $.contains(document.documentElement, this[0]);
}
</script>
<! - отрывок конца - >