Разница способов проверки свойств CSS JQuery против регулярного

Question

Мне было интересно, какова будет разница в этих двух кодах

$('.stars li').each(function(i){

  if(this.style.display !== 'none'){
    this.style.display = 'none';
    return false;
  }
});

и в этом коде

$('.stars li').each(function(i){

  if($(this).css('display', '')){
    $(this).css('display' = 'none');
    return false;
  }
});

, почему первый итерирует по каждому элементу li, однако второйне остается ли на первом элементе?

Answer 1

$(this).css('display', '')

- это выражение, которое оценивает значение - то, к чему оно относится, - это $(this) jQuery-объект, у которого также изменилось значение display.Таким образом, условие

if($(this).css('display', '')){

всегда будет выполняться, потому что объекты являются правдивыми.

Используйте взамен $(this).css('display') === 'none' ( один аргумент) для получения текущего вычисленного display стиль.

if ($('div').css('display') === 'none') {
  console.log('Div hidden');
} else {
  console.log('Div not hidden');
}

if ($('span').css('display') === 'none') {
  console.log('Span hidden');
} else {
  console.log('Span not hidden');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div></div>
<span style="display: none"></span>

Имейте в виду, что

this.style.display

проверяет свойство display на самом элементе , тогда как

$('div').css('display')

проверяет вычисленное свойство display.К элементу может быть применен display (например, из CSS, например div { display: none }), несмотря на то, что у него нет свойства display собственного элемента style объекта.