jQuery将类添加到一个元素而不是所有具有相同类的元素

Question

我在一个页面上有多个电池表，可动态获取其电源条宽度值，而我正在尝试将“lowBatt”类与JS和jQuery添加到现有的“bar”类中，当'bar'类宽度时小于2px，我有2个问题：

1. 只检查第一个'bar'类元素宽度。

2. 如果第一个'bar'类元素宽度的宽度小于2px，则将'lowBatt'类添加到所有'bar'类元素。

我需要检查的是检查所有'bar'类元素的宽度，任何小于2px宽度的类都将类'lowBatt'添加到那些'bar'类元素中，而使其他'bar'类元素更大仅比2px宽度。

$('.bar').each(function(i, obj){
  if ($('.bar').width() < 2) {
      $(this).addClass('lowBatt')};
});

.progress {
	height: 8px;
	width: 16px;
	background: #fff;
	border-radius: 0;
	border: 1px solid #fff;
	float: left;
	margin-bottom: 0;
}
.progress .bar {
  background-color: #000;
  background-image: none;
  background-repeat: repeat-x;
  box-shadow: none;
  box-sizing: border-box;
  color: #ffffff;
  float: left;
  font-size: 12px;
  height: 100%;
  text-align: center;
  text-shadow: none;
  transition: width 0.6s ease 0s;
}
.battTip {
	height: 6px;
  margin-top: 1px;
	margin-right: -3px;
  width: 2px;
	float: right;
	background: #fff;
	border: 1px solid #000;
	border-left: none;
}
.battIcnWrap {
	width: 18px;
	height: 10px;
	margin: 0 auto;
	float: left;
	border: 1px solid #000;
  margin-right: 10px;
}

.bar.lowBatt {
  background: #ff0000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="battIcnWrap">
  <div class="progress">
    <div class="bar" style="width: 1px;"></div> 
  </div>
  <div class="battTip"></div>
</div>
<div class="battIcnWrap">
  <div class="progress">
    <div class="bar" style="width: 8px;"></div> 
  </div>
  <div class="battTip"></div>
</div>
<div class="battIcnWrap">
  <div class="progress">
    <div class="bar" style="width: 1px;"></div> 
  </div>
  <div class="battTip"></div>
</div>
<div class="battIcnWrap">
  <div class="progress">
    <div class="bar" style="width: 15px;"></div> 
  </div>
  <div class="battTip"></div>
</div>

感谢您的帮助。

Answer 1

在循环内部，您需要使用this来引用循环的元素。所以使用：

if ($(this).width() < 2) {

＆＃13;

＆＃13;

$('.bar').each(function(i, obj){
  if ($(this).width() < 2) {
      $(this).addClass('lowBatt')};
});

＆＃13;

.progress {
	height: 8px;
	width: 16px;
	background: #fff;
	border-radius: 0;
	border: 1px solid #fff;
	float: left;
	margin-bottom: 0;
}
.progress .bar {
  background-color: #000;
  background-image: none;
  background-repeat: repeat-x;
  box-shadow: none;
  box-sizing: border-box;
  color: #ffffff;
  float: left;
  font-size: 12px;
  height: 100%;
  text-align: center;
  text-shadow: none;
  transition: width 0.6s ease 0s;
}
.battTip {
	height: 6px;
  margin-top: 1px;
	margin-right: -3px;
  width: 2px;
	float: right;
	background: #fff;
	border: 1px solid #000;
	border-left: none;
}
.battIcnWrap {
	width: 18px;
	height: 10px;
	margin: 0 auto;
	float: left;
	border: 1px solid #000;
  margin-right: 10px;
}

.bar.lowBatt {
  background: #ff0000;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="battIcnWrap">
  <div class="progress">
    <div class="bar" style="width: 1px;"></div> 
  </div>
  <div class="battTip"></div>
</div>
<div class="battIcnWrap">
  <div class="progress">
    <div class="bar" style="width: 8px;"></div> 
  </div>
  <div class="battTip"></div>
</div>
<div class="battIcnWrap">
  <div class="progress">
    <div class="bar" style="width: 1px;"></div> 
  </div>
  <div class="battTip"></div>
</div>
<div class="battIcnWrap">
  <div class="progress">
    <div class="bar" style="width: 15px;"></div> 
  </div>
  <div class="battTip"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

只需使用$(.bar)循环.each替换$(this)。

＆＃13;

＆＃13;

$('.bar').each(function(i, obj) {
  if ($(this).width() < 2) {
    $(this).addClass('lowBatt')
  };
});

＆＃13;

.progress {
  height: 8px;
  width: 16px;
  background: #fff;
  border-radius: 0;
  border: 1px solid #fff;
  float: left;
  margin-bottom: 0;
}

.progress .bar {
  background-color: #000;
  background-image: none;
  background-repeat: repeat-x;
  box-shadow: none;
  box-sizing: border-box;
  color: #ffffff;
  float: left;
  font-size: 12px;
  height: 100%;
  text-align: center;
  text-shadow: none;
  transition: width 0.6s ease 0s;
}

.battTip {
  height: 6px;
  margin-top: 1px;
  margin-right: -3px;
  width: 2px;
  float: right;
  background: #fff;
  border: 1px solid #000;
  border-left: none;
}

.battIcnWrap {
  width: 18px;
  height: 10px;
  margin: 0 auto;
  float: left;
  border: 1px solid #000;
  margin-right: 10px;
}

.bar.lowBatt {
  background: #ff0000;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="battIcnWrap">
  <div class="progress">
    <div class="bar" style="width: 1px;"></div>
  </div>
  <div class="battTip"></div>
</div>
<div class="battIcnWrap">
  <div class="progress">
    <div class="bar" style="width: 8px;"></div>
  </div>
  <div class="battTip"></div>
</div>
<div class="battIcnWrap">
  <div class="progress">
    <div class="bar" style="width: 1px;"></div>
  </div>
  <div class="battTip"></div>
</div>
<div class="battIcnWrap">
  <div class="progress">
    <div class="bar" style="width: 15px;"></div>
  </div>
  <div class="battTip"></div>
</div>

＆＃13;

＆＃13;

＆＃13;