Jquery проверить ширину CSS if

Question

У меня есть заявление Jquery if. Следует изменить ширину класса css, если целевой div (.item) имеет ширину 50%, по какой-то причине мой код не получает результат, и я хочу, чтобы элемент остался на 100%.

$(".item").each(function () {
  if ($(this).css({'width': '50%'})) {
      $('.colour').css({'width': '47%!important'});
  }
});

Может быть, какая-то проблема с синтаксисом?

Answer 1

Кажется, проблема в том, что вы устанавливаете ширину, а if проверяет возвращаемый объект jQuery ...

if ($(this).css({'width': '50%'}))

Вы должны вернутьШирина объекта, используя что-то вроде .width() или .outerWidth() ... однако проблема затем заключается в том, что он будет в пикселях, а не в процентах.

Чтобы получитьвокруг этого вы можете получить ширину родительского элемента и сравнить значение ... однако, это не точная наука, так как есть большое количество вещей, которые могут влиять на значения (margin, padding, border, float,и т.д) ...

// 0.5 == 50%
if ($(this).width() / $(this).parent().width() == 0.5)

$(function() {
  // Timeout to show it happening
  setTimeout(function() {
    $(".inner").each(function() {
      // 0.5 == 50%
      if ($(this).width() / $(this).parent().width() == 0.5) {
        // Setting 25% to show big difference
        $(this).css({"width": "25%"});
      }
    });
  }, 1000);
});

div { height: 100px }
.outer { background-color: red }
.inner { background-color: blue; width:50% }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Wait a second...<br/>
<div class="outer">
  <div class="inner">
  </div>
</div>

Последняя проблема заключается в том, что я только что обнаружил, что jQuery не поддерживает !important как часть .css method ...

Примечание: .css() игнорирует !important объявления. Таким образом, оператор $( "p" ).css( "color", "red !important" ) не превращает цвет всех абзацев на странице в красный. Настоятельно рекомендуется вместо этого использовать классы;в противном случае используйте плагин jQuery.