JQuery и одинаковые имена

132

30 апреля 2021, 20:00

<div class="progress-bar-item-with-text">
                    <p>Количество сделок продажа</p>
                    <div class="progress-bar-item uk-margin-right">
                        <div class="progress-bar-activity" style="width: 10%">
                        </div>
                    </div>
                    <div class="uk-margin-remove-left uk-child-width-1-2@m" uk-grid>
                        <span class="progress-bar-text-down uk-text-right">1</span>
                        <span class="progress-bar-text-down uk-text-right"><b>1.2</b></span>
                    </div>
                </div>

У меня есть 6 штук блоков, каждые называются одинаково, только значения в теге <b>1.2</b> разные. Как сделать так, чтобы при значении в теге b > 1 к строке

<div class="progress-bar-activity" style="width: 10%"></div>

добавлялся один класс, а при значении в теге b < 1 добавлялся другой класс?

Делаю так:

$(document).ready(function() {
    if (parseFloat($('.progress-bar-item-with-text .progress-bar-text-down b').text()) > 1) {
        $('.progress-bar-item-with-text .progress-bar-item .progress-bar-activity').addClass("progress-bar-activity-more");
    }
    else {
        $('.progress-bar-item-with-text .progress-bar-item .progress-bar-activity').addClass("progress-bar-activity-less");
    }
});

Но, получается, что один класс добавляется ко всем классами <div class="progress-bar-activity" style="width: 10%"></div>

Answer 1

Надо было еще добавить высоту height к блоку чтобы было видно.

Если номер больше один будет показывать красный цвет иначе пурпурный.

$(document).ready(_ => { 
    document.querySelectorAll(".progress-bar-text-down b").forEach(el => { 
        if(el.innerHTML > 1){ 
             el 
              .closest(".progress-bar-item-with-text") 
              .querySelector(".progress-bar-activity") 
              .classList.add("progress-bar-activity-more"); 
        }  else { 
             el 
              .closest(".progress-bar-item-with-text") 
              .querySelector(".progress-bar-activity") 
              .classList.add("progress-bar-activity-less"); 
        } 
    }); 
});

.progress-bar-activity-more { 
  background:red; 
} 
.progress-bar-activity-less { 
  background:purple; 
} 
.progress-bar-activity { 
  height:10px; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> 
<div class="progress-bar-item-with-text"> 
    <p>Количество сделок продажа</p> 
    <div class="progress-bar-item uk-margin-right"> 
        <div class="progress-bar-activity" style="width: 10%"> 
        </div> 
    </div> 
    <div class="uk-margin-remove-left uk-child-width-1-2@m" uk-grid> 
        <span class="progress-bar-text-down uk-text-right">1</span> 
        <span class="progress-bar-text-down uk-text-right"><b>2</b></span> 
    </div> 
</div> 
<div class="progress-bar-item-with-text"> 
    <p>Количество сделок продажа</p> 
    <div class="progress-bar-item uk-margin-right"> 
        <div class="progress-bar-activity" style="width: 10%"> 
        </div> 
    </div> 
    <div class="uk-margin-remove-left uk-child-width-1-2@m" uk-grid> 
        <span class="progress-bar-text-down uk-text-right">1</span> 
        <span class="progress-bar-text-down uk-text-right"><b>0</b></span> 
    </div> 
</div> 
<div class="progress-bar-item-with-text"> 
    <p>Количество сделок продажа</p> 
    <div class="progress-bar-item uk-margin-right"> 
        <div class="progress-bar-activity" style="width: 10%"> 
        </div> 
    </div> 
    <div class="uk-margin-remove-left uk-child-width-1-2@m" uk-grid> 
        <span class="progress-bar-text-down uk-text-right">1</span> 
        <span class="progress-bar-text-down uk-text-right"><b>0</b></span> 
    </div> 
</div><div class="progress-bar-item-with-text"> 
    <p>Количество сделок продажа</p> 
    <div class="progress-bar-item uk-margin-right"> 
        <div class="progress-bar-activity" style="width: 10%"> 
        </div> 
    </div> 
    <div class="uk-margin-remove-left uk-child-width-1-2@m" uk-grid> 
        <span class="progress-bar-text-down uk-text-right">1</span> 
        <span class="progress-bar-text-down uk-text-right"><b>1.2</b></span> 
    </div> 
</div>