jQuery add class to one element instead of all with same class

Question

I have multiple battery meters on a page that get their power bar width values dynamically and I'm trying to add a 'lowBatt' class with JS and jQuery to the existing 'bar' class when when the 'bar' class width is less than 2px and I have 2 issues:

1. It is only checking the first 'bar' class element width.

2. If the width of that first 'bar' class elements width is less than 2px it adds the 'lowBatt' class to all 'bar' class elements.

What I need to happen is check all 'bar' class elements widths and any that are less than 2px width add the class 'lowBatt' to only those 'bar' class elements, leaving the other 'bar' class elements with greater than 2px widths alone.

$('.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>

Thanks for any help.

Answer 1

Just replace $(.bar) with the .each loop with $(this).

$('.bar').each(function(i, obj) {
  if ($(this).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 2

Inside your loop you need to use this to refer to the element being looped on. So use:

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

$('.bar').each(function(i, obj){
  if ($(this).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>