主页 / 问题 / 967871
Accepted
Anton Essential
Asked:2020-04-10 19:26:42 +0800 CST2020-04-10 19:26:42 +0800 CST

如何检查每个元素的宽度？

  • 772

告诉我如何检查条形的宽度，例如，如果它小于所需值，则向该元素添加一个类，其余部分保持不变。我尝试使用 $(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');
}
javascript

2 个回答

  1. // достаем все элементы .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

    • 1
  2. Best Answer

    您将元素的宽度设置为百分比。但是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>

    • 0

相关问题