Часто приходится проверять наличие или отсутствие элемента на странице. Это связано также с тем, чтобы 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» не найден :(»
Вот как работает наш пример:
___
Тест:
Теперь будем проверять наличие элементов) Удачи!
Добавить комментарий