Часто приходится проверять наличие или отсутствие элемента на странице. Это связано также с тем, чтобы javascript гарантированно выполнялся. Если в рамках алгоритмов будут задействованы элементы которых нет, то возможно полное прекращение работы скрипта.
Проверить есть ли элемент можно очень просто, нужно выполнив выборку элементов, проверить ее длину. $(«#my»).length — данное выражение вернет true (1) при наличии элемента и false (0) при его отсутствии. На этом свойстве мы и сделаем проверку.
Предлагаю не большой пример с комментариями.
<!DOCTYPE html> <html> <head> <style> /* Стилизация элементов */ body { display: flex; flex-direction: column; justify-content: center; align-items: center; } div { padding-top: 10px; } </style> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script> $( document ).ready(function(){ // Проверка наличия элемента с id='my' $("#input1").bind('click', function() { if ($("#my").length) { $("p").text("Элемент с id='my' найден!"); } else { $("p").text("Элемента с id='my' не найден :("); } } ); // Проверка наличия элемента с id='nonediv' $("#input2").bind('click', function() { if ($("#nonediv").length) { $("p").text("Элемент id='nonediv' найден!"); } else { $("p").text("Элемента id='nonediv' не найден :("); } } ); }); </script> </head> <body> <input id="input1" type="button" value="Проверка наличия элемента с id='my'"> <br> <input id="input2" type="button" value="Проверка наличия элемента с id='nonediv'"> <div id="my">Элемент с id='my'</div> <p></p> </body> </html>
Нажимая на кнопку с id = «input1» , мы запускаем проверку $(«#input1»).bind(«click», function() {…}) данной функции, где ищем элемент #my и определяем его наличие командой: $(«#my»).length.
В зависимости от того чему равно $(«#my»).length — 0 или 1, делаем вывод есть ли этот элемент на странице или нет.
Так как элемент #my есть, то выражение $(«#my»).length вернет «1», а следовательно выводим сообщение «Элемент с id=’my’ найден!»
Аналогичную проверку выполняем нажимая кнопку с id = «input2». Запускаем функцию в запускаем проверку $(«#input2»).bind(«click», function() {…}), в которой уже определяем наличие элемента с id = «nonediv». Так как такого элемента на странице нет, то и выражение $(«#nonediv»).length вернет «0», а следовательно мы выведем сообщение: «Элемента id = «nonediv» не найден :(»
Вот как работает наш пример:
___
Тест:
Теперь будем проверять наличие элементов) Удачи!
Добавить комментарий