Как проверить ширину каждого элемента?

117
18 января 2020, 23:30

подскажите как проверить ширину bar, и если она например меньше нужного значения добавить к этому элементу класс а остальные оставить как есть. Попытался через $(this) не получилось.

<div class='wrp'>
  <div class='bar' style='width: 1%'>
  </div>
</div>
<div class='wrp'>
  <div class='bar' style='width: 19%'>
  </div>
</div>
<div class='wrp'>
  <div class='bar' style='width: 54%'>
  </div>
</div>
var bar = $(this).closest('.wrp').find('.bar').width();
if(bar > 20) {
    bar.addClass('reverse');
}
Answer 1

Вы задаёте ширину элементов в процентах. Но при расчётах js будет оперировать пикселями. И сравнение будет только по пикселям. К тому же надо понимать, от какой ширины какого объекта мы берём процент? Для примера возьмём ширину вьюпорта. 

let $bar = $('.bar'), 
  windowWidth = $(window).width(), 
  prstg = 20; 
$bar.each(function() { 
  console.log($(this).width()); 
  if ($(this).width() < (windowWidth * prstg)) { 
    $(this).addClass('reverse'); 
  } 
});
.bar{height:50px;border:1px solid #000}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class='wrp'><div class='bar' style='width: 1%'></div></div> 
<div class='wrp'><div class='bar' style='width: 19%'></div></div> 
<div class='wrp'><div class='bar' style='width: 54%'></div></div>

Answer 2

// достаем все элементы .bar 
var allBars = $('.bar'); 
 
// Пробегаемся циклом по ним и проверяем ширину 
allBars.each(function() { 
  let w = $(this).width(); 
 
  if (w > 20) $(this).addClass('red'); 
  else $(this).addClass('green'); 
  console.log(w); 
});
.bar { 
  height: 10px; 
} 
 
.red { 
  background-color: red; 
} 
 
.green { 
  background-color: green; 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class='wrp'> 
  <div class='bar' style='width: 1%'> 
  </div> 
</div> 
<div class='wrp'> 
  <div class='bar' style='width: 19%'> 
  </div> 
</div> 
<div class='wrp'> 
  <div class='bar' style='width: 54%'> 
  </div> 
</div>

JQuery.each

READ ALSO
Не работает WebSocket
javascript

Не работает WebSocket

Пытаюсь сделать минимальный рабочий пример с веб-сокетамиНа стороне сервера использую Spring Framework, клиент - JavaScript

 95
Настройка даты и времени в input
javascript

Настройка даты и времени в input

Как сделать, чтобы <input type="datetime-local" > имел максимальное значение даты и времени, сегодняЧерез JS

 126
Классы JS (В частности ES5)
javascript

Классы JS (В частности ES5)

Допустим такой код:

 145
Как задать параметры дебаггеру в visual studio code?
javascript

Как задать параметры дебаггеру в visual studio code?

Не могу разобраться как настроить debugger в vs code, а именно, куда передавать эти глобальные переменные, вот пример того как они выглядят в вебшторме

 100