Многие пользователи сомневаются, как проверить, существует ли элемент в HTML DOM с помощью jQuery. В двух словах, как проверить наличие элемента на странице самым простым способом?
Есть несколько способов, которые мы можем использовать для достижения этого результата. Один из них — проверить, возвращает ли свойство «длина» селектора элемента число больше 0.
Например, если у нас есть HTML, подобный показанному ниже.
1<!DOCTYPE html>
2<html>
3<head>
4 <title>Lorem ipsum dolor</title>
5 <meta charset="utf-8">
6</head>
7<body>
8 <div id="myDiv">Lorem ipsum dolor sit amet.</div>
9</body>
10</html>
И мы хотим проверить, существует ли элемент «myDiv» в DOM, т.е. на странице мы можем использовать следующий код.
1if ($("#myDiv").length > 0) {
2 console.log("The element exists!");
3}
Упрощение кода
Поскольку многие вещи в JavaScript либо истинны, либо ложны, возврат свойства «длина» также может считаться истинным или ложным. Возвращаемое значение — это число, 0 означает «ложь», а все остальное — «истина».
Таким образом, мы можем упростить код следующим образом.
1if ($("#myDiv").length) {
2 console.log("The element exists!");
3}
Даже удалив сравнительный «> 0», возвращаемое значение останется прежним.
Создание функции «существует» для jQuery
Мы можем пойти немного дальше и добавить функцию с именем «exists». Эту функцию можно использовать непосредственно с элементом, который мы хотим проверить.
1jQuery.fn.exists = function() {
2 return ( $(this).length > 0);
3}
4
5var elementExists = $("#myDiv").exists();
6
7console.log(elementExists);
Мы можем еще больше улучшить и не допустить, чтобы метод представлял возможность цепочки. Что в данном случае невозможно. Мы сделаем это следующим образом.
1jQuery.exists = function(selector) {
2 return ( $(selector).length > 0 );
3}
4
5if ( $.exists("#myDiv") ) {
6 console.log("The element exists!");
7}
Обратите внимание, что теперь мы передаем селектор в качестве аргумента функции «существует» вместо того, чтобы имитировать цепочку непосредственно из объекта.
Проверка существования элемента HTML с помощью массива
Когда мы используем селектор в jQuery, он возвращает массив элементов. Если мы попытаемся получить доступ к первому элементу этого массива, и он вернет «undefined», это означает, что рассматриваемый элемент не существует в DOM.
1if ( $('#myDiv')[0] ) {
2 console.log("The element exists!");
3}
Как видите, существует несколько способов проверить наличие HTML-элемента на странице. Что самое лучшее? Ну, тот, который решит вашу проблему. Важно то, что ваш код работает и работает.