Как использовать jQuery, чтобы получить элемент с определенной шириной?

Question

Я работаю над страницей, где есть около 6 делений с тем же классом "bar", но ширина каждого деления динамически изменяется в зависимости от ввода пользователяТеперь мне нужно изменить цвет любого элемента div шириной 250 пикселей с классом «bar».Моя концепция такова:

if($('.bar').width() == 250) {
    $(this).addClass('barColor');
}
else {
    $(this).removeClass('barColor');
}

Это в основном моя концепция, но я не знаю, как добиться эффекта.Буду очень признателен, если кто-нибудь сможет помочь

Спасибо.

Answer 1

$('.bar').each(function(){
    if($(this).width() == 250) 
        $(this).addClass('barColor');
    else
        $(this).removeClass('barColor');
}).

Answer 2

Вы предложили решение звучит так, как будто оно должно работать, если у вас есть только один элемент .bar, но у вас есть несколько. Еще одна вещь, которую я вижу, это потенциально, если вы хотите продолжать запускать ее с заданным интервалом, поэтому всякий раз, когда эти блоки динамически изменяются, вы применяете эффект.

$(window).resize(function() {
  clearTimeout(this.id);
  this.id = setTimeout(adjustClass, 500);
});

function adjustClass() {
  $('.bar').each(function() {
    if $(this).width() == 250) {
      $(this).addClass('barColor');
    }
    else {
      $(this).removeClass('barColor');
    }
  });
}

РЕДАКТИРОВАТЬ: Каждый раз, когда размер окна изменяется, эффект будет вызываться каждые 500 миллисекунд, пока пользователь изменяет размеры, чтобы избежать потери ресурсов для вызова функции для каждой разницы изменения размера окна.