Using jQuery to set CSS "width" property as the text value of a siblings child

user_12774443 0
Viewed 30

I'd like to set the with of each .progress-bar-percentage using the text value of his closest percentage-value

I've tried

$('.progress-bar-percentage').css('width', $(this).siblings('.percentage-script').find('.percentage-value').text());

But with no luck

<div class="progress-bar-total">
    <div class="progress-bar-percentage"></div>
    <div class="percentage-script">
        <div class="percentage-value">50%</div>
    </div>
</div>

<div class="progress-bar-total">
    <div class="progress-bar-percentage"></div>
    <div class="percentage-script">
        <div class="percentage-value">25%</div>
    </div>
</div>

<div class="progress-bar-total">
    <div class="progress-bar-percentage"></div>
    <div class="percentage-script">
        <div class="percentage-value">10%</div>
    </div>
</div>
jquery
1 Answers

You have to use:

$('.progress-bar-percentage').css('width', function() {
  return $(this).siblings('.percentage-script').find('.percentage-value').text()
});

Demo

$('.progress-bar-percentage').css('width', function() {
  return $(this).siblings('.percentage-script').find('.percentage-value').text()
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="progress-bar-total">
  <div class="progress-bar-percentage"></div>
  <div class="percentage-script">
    <div class="percentage-value">50%</div>
  </div>
</div>

<div class="progress-bar-total">
  <div class="progress-bar-percentage"></div>
  <div class="percentage-script">
    <div class="percentage-value">25%</div>
  </div>
</div>

<div class="progress-bar-total">
  <div class="progress-bar-percentage"></div>
  <div class="percentage-script">
    <div class="percentage-value">10%</div>
  </div>
</div>

user_29432180
Related