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:

It is only checking the first 'bar' class element width.
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.

Suggest that next time, before posting your question, you read the API documentation for the relevant method, which quite clearly both shows and tells you exactly how to do this. — T.J. Crowder
– T.J. Crowder, Commented Aug 7, 2017 at 17:38

j08691 · Accepted Answer · 2017-08-07 17:35:27Z

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>

@T.J.Crowder I'm sure. It's one of those common questions that we've all seen but finding the dupe seems to take forever.

Anurag Singh Bisht · Accepted Answer · 2017-08-07 17:36:32Z

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>

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related