#javascript #jquery
#javascript #jquery
Вопрос:
У меня есть несколько элементов с высотой встроенного стиля, назначенной с помощью скрипта. Мне нужно проверить, имеет ли элемент следующее: style="height: 0px"
<div class="myEm" style="height: 30px">...</div>
<div class="myEm" style="height: 10px">...</div>
<div class="myEm" style="height: 0px">...</div>
jQuery
$(".myEm").each(function(){
if ($(this).attr("style") == "0px") {
$(this).css("border-color", "red");
}
});
Комментарии:
1. Если высота может быть
0
, почему вы устанавливаетеmin-height: 10px
? Я думаю, что это то, что вызывает проблему. Кроме того, почему бы просто не скрыть элемент?2. Ну, это не вызывает этой проблемы, но я вижу, что это вызывает проблему с тем, что вы пытаетесь сделать. jsfiddle.net/2qb4g6as
Ответ №1:
Работает следующее:
$(".myEm").each(function() {
if (this.style.height == "0px") {
$(this).css("border-color", "red");
}
});
Комментарии:
1. Это так. Есть ли какой-нибудь способ не смешивать jQuery со стандартным JS?
2. if ($(this).attr(‘style’) == ‘height: 0px’) { также будет работать, но используйте по своему усмотрению.
Ответ №2:
Если у вас есть точный код и вы не можете изменить какой-либо HTML-код, вы можете выполнить сравнение строк здесь..
$(".myEm").each(function() {
if (this.style.height == '0px') {
$(this).css("border-color", "red");
}
});
Проблема в том, что вы установили min-height
значение 10px
, которое находится в действии, поэтому, хотя вы 0px
определили как inline, оно не переопределит ваш CSS, поскольку min-height
определяется отдельно. Итак, либо вам нужно вызвать min-height: 0;
inline, либо вы можете проверить, как указано выше. Обратите внимание, что .height()
всегда будет возвращаться 10
, поэтому я использую this.style.height
для получения значения, которое вы объявили встроенным, а не того, которое отображается.
Обратите внимание, что если HTML-код соответствует тому, которым вы поделились, вы также можете достичь вышеуказанного, например
.myEm[style="height: 0px"] {
border: 1px solid red;
}
Комментарии:
1. К вашему СВЕДЕНИЮ, запись
$(this).get(0)
функционально идентична записиthis
здесь2. да, но я прочитал, что в OP требуется способ «jQuery», и поскольку @Rupinder уже ответил, поэтому я хотел предоставить какой-то другой синтаксис, который тоже подходит..
3. уверен, что оба варианта хороши и работают абсолютно одинаково, но если вы хотите получить доступ к
style
свойству наthis
, тогда кажется совершенно бесполезным переносить его в селектор jQuery, а затем обращаться к первому (и единственному) элементу в массиве селекторов.4. @ChrisBarr хм, имеет смысл, позвольте мне изменить это 🙂 спасибо
Ответ №3:
- Ваша высота никогда не равна 0, потому что у вас есть
min-height: 10px
в вашем css. - Вы можете напрямую использовать $(this).высота вместо доступа к объекту style. Он выдает числовое значение, и вы можете выполнить проверку NOT, как показано.
Надеюсь, это полезно!
$(".myEm").each(function() {
console.log($(this).height())
if (!$(this).height()) {
$(this).css("border-color", "red");
}
});
.myEm {
border: 1px solid #ccc;
line-height: 20px;
margin: 20px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="myEm" style="height: 30px">...</div>
<div class="myEm" style="height: 10px">...</div>
<div class="myEm" style="height: 0px">...</div>