javascript - элементы - видимость элемента jquery
Как проверить, скрыт ли элемент в jQuery? (20)
Используйте переключение классов, а не редактирование стиля. , ,
Использование классов, предназначенных для «скрытия» элементов, является простым, а также одним из наиболее эффективных методов. Переключение класса 'hidden' с типом Display
'none' будет выполняться быстрее, чем редактирование этого стиля напрямую. Я объяснил некоторые из этого довольно подробно в вопросе переполнения стека. Поворот двух элементов, видимых / скрытых в одном div .
Рекомендации и оптимизация JavaScript
Вот поистине просветительский видеоролик Google Tech Talk от главного инженера Google Николаса Закаса:
- Ускорьте свой Javascript (YouTube)
Можно переключить видимость элемента, используя функции .hide()
, .show()
или .toggle()
.
Как бы вы проверили, является ли элемент видимым или скрытым?
From Как определить состояние переключаемого элемента?
Вы можете определить, скомплектован ли элемент или нет, с помощью :visible
и :hidden
селекторов.
var isVisible = $('#myDiv').is(':visible');
var isHidden = $('#myDiv').is(':hidden');
Если вы просто воздействуете на элемент на основе его видимости, вы можете просто включить :visible
или :hidden
в выражении селектора. Например:
$('#myDiv:visible').animate({left: '+=200px'}, 'slow');
Вам нужно проверить оба ... Показать, а также видимость:
if ($(this).css("display") == "none" || $(this).css("visibility") == "hidden") {
// The element is not visible
} else {
// The element is visible
}
Если мы проверим значение $(this).is(":visible")
, jQuery проверяет обе вещи автоматически.
Другой ответ, который вы должны учесть, это то, что если вы скрываете элемент, вы должны использовать jQuery , но вместо того, чтобы скрывать его, вы удаляете весь элемент, но вы копируете его содержимое HTML и сам тег в переменную jQuery, а затем все, что вам нужно сделать, это проверить, есть ли такой тег на экране, используя нормальную if (!$('#thetagname').length)
.
Как видимость элементов и jQuery работает ;
Элемент может быть скрыт с display:none
, visibility:hidden
или opacity:0
. Разница между этими методами:
-
display:none
скрывает элемент, и он не занимает места; -
visibility:hidden
скрывает элемент, но по-прежнему занимает место в макете; opacity:0
скрывает элемент как «видимость: скрытый», и он по-прежнему занимает место в макете; единственная разница заключается в том, что непрозрачность позволяет сделать элемент частично прозрачным;if ($('.target').is(':hidden')) { $('.target').show(); } else { $('.target').hide(); } if ($('.target').is(':visible')) { $('.target').hide(); } else { $('.target').show(); } if ($('.target-visibility').css('visibility') == 'hidden') { $('.target-visibility').css({ visibility: "visible", display: "" }); } else { $('.target-visibility').css({ visibility: "hidden", display: "" }); } if ($('.target-visibility').css('opacity') == "0") { $('.target-visibility').css({ opacity: "1", display: "" }); } else { $('.target-visibility').css({ opacity: "0", display: "" }); }
Полезные методы переключения jQuery:
$('.click').click(function() { $('.target').toggle(); }); $('.click').click(function() { $('.target').slideToggle(); }); $('.click').click(function() { $('.target').fadeToggle(); });
Можно просто использовать hidden
или visible
атрибут, например:
$('element:hidden')
$('element:visible')
Или вы можете упростить то же самое, что и в следующем.
$(element).is(":visible")
Ни один из этих ответов не касается того, что я понимаю, это вопрос, который я искал: «Как обрабатывать элементы, которые имеют visibility: hidden
?» , Ни :visible
ни :hidden
не справятся с этим, поскольку они оба ищут отображение в документации. Насколько я могу судить, нет селектора для обработки видимости CSS. Вот как я его разрешил (стандартные селектора jQuery, может быть более сжатый синтаксис):
$(".item").each(function() {
if ($(this).css("visibility") == "hidden") {
// handle non visible state
} else {
// handle visible state
}
});
Поскольку Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout
(как описано для jQuery: visible Selector ) - мы можем проверить, действительно ли элемент виден таким образом:
function isElementReallyHidden (el) {
return $(el).is(":hidden") || $(el).css("visibility") == "hidden" || $(el).css('opacity') == 0;
}
var booElementReallyShowed = !isElementReallyHidden(someEl);
$(someEl).parents().each(function () {
if (isElementReallyHidden(this)) {
booElementReallyShowed = false;
}
});
Поскольку вопрос относится к одному элементу, этот код может быть более подходящим:
// Checks css for display:[none|block], ignores visibility:[true|false]
$(element).is(":visible");
// The same works with hidden
$(element).is(":hidden");
То же, что и предложение twernt , но применяется к одному элементу; и он соответствует алгоритму, рекомендованному в FAQ jQuery
Пример использования видимой проверки для рекламного блока активирован:
$(document).ready(function(){
if(!$("#ablockercheck").is(":visible"))
$("#ablockermsg").text("Please disable adblocker.").show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ad-placement" id="ablockercheck"></div>
<div id="ablockermsg" style="display: none"></div>
«ablockercheck» - это идентификатор, который блокирует рекламный блок. Поэтому, проверяя, видно ли это, вы можете определить, включен ли рекламный блок.
Пример:
$(document).ready(function() {
if ($("#checkme:hidden").length) {
console.log('Hidden');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="checkme" class="product" style="display:none">
<span class="itemlist"><!-- Shows Results for Fish --></span> Category:Fish
<br>Product: Salmon Atlantic
<br>Specie: Salmo salar
<br>Form: Steaks
</div>
Селектор :visible
соответствии с документацией jQuery :
- У них нет значения
display
в CSS.- Это элементы формы с
type="hidden"
.- Их ширина и высота явно установлены в 0.
- Элемент предка скрыт, поэтому элемент не отображается на странице.
Элементы с
visibility: hidden
илиopacity: 0
считаются видимыми, поскольку они все еще потребляют пространство в макете.
Это полезно в некоторых случаях и бесполезно в других, потому что, если вы хотите проверить, является ли элемент видимым ( display != none
), игнорируя видимость родителей, вы обнаружите, что выполнение .css("display") == 'none'
не только быстрее, но и правильно вернет проверку видимости.
Если вы хотите проверить видимость вместо отображения, вы должны использовать: .css("visibility") == "hidden"
.
Также учтите дополнительные примечания jQuery :
Поскольку
:visible
является расширением jQuery, а не частью спецификации CSS, запросы с использованием:visible
не могут воспользоваться повышением производительности, предоставляемым встроенным методом DOMquerySelectorAll()
. Для достижения наилучшей производительности при использовании:visible
для выбора элементов сначала выберите элементы, используя чистый селектор CSS, затем используйте.filter(":visible")
.
Кроме того, если вас беспокоит производительность, вы должны проверить Теперь вы видите меня ... показать / скрыть производительность (2010-05-04). И используйте другие методы для отображения и скрытия элементов.
Также здесь есть тернарное условное выражение для проверки состояния элемента, а затем для его переключения:
$('someElement').on('click', function(){ $('elementToToggle').is(':visible') ? $('elementToToggle').hide('slow') : $('elementToToggle').show('slow'); });
Часто, проверяя, что-то видимо или нет, вы немедленно пойдете прямо вперед и сделаете что-то еще с ним. Цепочка jQuery делает это проще.
Поэтому, если у вас есть селектор, и вы хотите выполнить какое-либо действие на нем, только если он виден или скрыт, вы можете использовать filter(":visible")
или filter(":hidden")
а затем привязать его к действию, которое вы хотите брать.
Поэтому вместо утверждения if
, например:
if ($('#btnUpdate').is(":visible"))
{
$('#btnUpdate').animate({ width: "toggle" }); // Hide button
}
Или более эффективным, но даже более уродливым:
var button = $('#btnUpdate');
if (button.is(":visible"))
{
button.animate({ width: "toggle" }); // Hide button
}
Вы можете сделать все это в одной строке:
$('#btnUpdate').filter(":visible").animate({ width: "toggle" });
Чтобы проверить, не видно ли это, я использую !
:
if ( !$('#book').is(':visible')) {
alert('#book is not visible')
}
Или следующее также является sam, сохраняя селектор jQuery в переменной, чтобы иметь лучшую производительность, когда вам это нужно несколько раз:
var $book = $('#book')
if(!$book.is(':visible')) {
alert('#book is not visible')
}
Это работает для меня, и я использую show()
и hide()
чтобы сделать мой div скрытым / видимым:
if( $(this).css('display') == 'none' ){
/* your code goes here */
} else {
/* alternate logic */
}
Я бы использовал CSS-класс .hide { display: none!important; }
.hide { display: none!important; }
.
Для скрытия / показа вызова я вызываю .addClass("hide")/.removeClass("hide")
. Для проверки видимости я использую .hasClass("hide")
.
Это простой и понятный способ проверить / скрыть / показать элементы, если вы не планируете использовать .toggle()
или .animate()
.
$('#clickme').click(function() {
$('#book').toggle('slow', function() {
// Animation complete.
alert($('#book').is(":visible")); //<--- TRUE if Visible False if Hidden
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clickme">
Click here
</div>
<img id="book" src="http://www.chromefusion.com/wp-content/uploads/2012/06/chrome-logo.jpg" alt="" />
Источник:
jsFiddle:
if ( $(element).css('display') == 'none' || $(element).css("visibility") == "hidden"){
// element is hidden
}
Вышеуказанный метод не учитывает видимость родителя. Чтобы рассмотреть родителя, вы должны использовать .is(":hidden")
или .is(":visible")
.
Например,
<div id="div1" style="display:none">
<div id="div2" style="display:block">Div2</div>
</div>
Вышеуказанный метод рассмотрит
div2
видимый пока:visible
нет. Но приведенное выше может быть полезно во многих случаях, особенно если вам нужно найти, есть ли какие-либо ошибки divs, видимые в скрытом родителе, потому что в таких условиях:visible
не будет работать.