Есть ли функция "существует" для jQuery?

Question

Как я могу проверить наличие элемента в jQuery?

Текущий код, который у меня есть, таков:

if ($(selector).length > 0) {
    // Do something
}

Есть ли более элегантный способ подойти к этому? Возможно, плагин или функция?

Answer 1

Вы можете использовать это:

jQuery.fn.extend({
    exists: function() { return this.length }
});

if($(selector).exists()){/*do something*/}

Answer 2

Причина, по которой все предыдущие ответы требуют параметр .length, заключается в том, что они в основном используют селектор jquery $(), у которого querySelectorAll находится за занавесом (или они используют его напрямую). Этот метод довольно медленный, потому что ему нужно проанализировать все дерево DOM, отыскивая все совпадения с этим селектором и заполняя им массив.

Параметр ['length'] не нужен и не полезен, и код будет намного быстрее, если вместо этого напрямую использовать document.querySelector(selector), поскольку он возвращает первый соответствующий элемент или ноль, если не найден.

function elementIfExists(selector){  //named this way on purpose, see below
    return document.querySelector(selector);
}
/* usage: */
var myelement = elementIfExists("#myid") || myfallbackelement;

Однако этот метод оставляет нас с фактическим возвращаемым объектом; это нормально, если он не будет сохранен как переменная и использован повторно (таким образом, сохраняя ссылку, если мы забудем).

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 */

В некоторых случаях это может быть желательно. Его можно использовать в цикле for следующим образом:

/* locally scoped myel gets garbage collected even with the break; */
for (var myel; myel = elementIfExist(sel); myel.getParentNode.removeChild(myel))
    if (myel == myblacklistedel) break;

Если вам на самом деле не нужен элемент и вы хотите получить / сохранить только значение true / false, просто удвойте его! Это работает для обуви, которая развязана, так зачем сюда завязывать узлы?

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);

Answer 3

Я обнаружил, что if ($(selector).length) {} недостаточно. Когда приложение selector будет пустым {}.

, оно молча сломает ваше приложение.

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.');
}

Я все еще ищу лучшее решение, хотя оно немного тяжелое.

Редактировать: ВНИМАНИЕ! Это не работает в IE, когда selector является строкой.

$.isEmptyObject('hello') // FALSE in Chrome and TRUE in IE

Answer 4

Является ли $.contains() тем, что вы хотите?

jQuery.contains( container, contained )

Метод $.contains() возвращает true, если элемент DOM, предоставленный вторым аргументом, является потомком элемента DOM, предоставленного первым аргументом, является ли он прямым потомком или вложенным более глубоко. В противном случае возвращается false. Поддерживаются только узлы элементов; если второй аргумент является узлом текста или комментария, $.contains() вернет false.

Примечание : первый аргумент должен быть элементом DOM, а не объектом jQuery или простым объектом JavaScript.

Answer 5

Вы можете проверить наличие или отсутствие элемента в java-скрипте. Если длина больше нуля, то элемент присутствует, если длина равна нулю, то элемента нет

// 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
}

Answer 6

Проверка существования элемента тщательно документирована на самом официальном сайте jQuery!

Используйте свойство .length коллекции jQuery, возвращенной вашим селектор:

if ($("#myDiv").length) {
    $("#myDiv").show();
}

Обратите внимание, что не всегда необходимо проверять, существует ли элемент. Следующий код покажет элемент, если он существует, и ничего не сделает (без ошибок), если нет:

$("#myDiv").show();

Answer 7

это очень похоже на все ответы, но почему бы не использовать оператор ! дважды, чтобы получить логическое значение:

jQuery.fn.exists = function(){return !!this.length};

if ($(selector).exists()) {
    // the element exists, now what?...
}

Answer 8

$(selector).length && //Do something

Answer 9

Попробуйте протестировать элемент DOM

if (!!$(selector)[0]) // do stuff

Answer 10

Вдохновленный ответом hiway Я придумал следующее:

$.fn.exists = function() {
    return $.contains( document.documentElement, this[0] );
}

jQuery.contains принимает два элемента DOM и проверяет, содержит ли первый элемент второй.

Использование document.documentElement в качестве первого аргумента соответствует семантике метода exists, когда мы хотим применить его исключительно для проверки существования элемента в текущем документе.

Ниже я собрал фрагмент, который сравнивает jQuery.exists() с подходами $(sel)[0] и $(sel).length, которые оба возвращают значения truthy для $(4), тогда как $(4).exists() возвращает false. В контексте проверки существования элемента в DOM это, кажется, желаемый результат .

$.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>