Как можно реализовать смену цвета текста при проверке самого текста одновременно в нескольких одинаковых блоках?

Question

[Kardamon_mchl]

Прописал на сайт функцию, которая проверяет текст в теге и если там написано "В наличии", добавляется класс который окрашивает текст в зеленый, если написано "Нет в наличии" - красный. При ином же тексте цвет - желтый. Сама функция работает, но блоков с наличием у меня должно быть несколько подряд, так как они выступают табами и меняются по кнопкам и вот когда этих блоков уже несколько, функция не выполняется и висит постоянно желтый текст, не взирая на то, какой там текст. Подскажите, как можно исправить?

<p class="product__availability sel-content-2 active">В наличии</p>

$('.product__availability').each(function () {
	var availability = $('.product__availability').text();
	if (availability == 'В наличии') {
		$(this).removeClass('not-available').addClass('available');
	}
	if (availability == 'Нет в наличии') {
		$(this).removeClass('available').addClass('not-available');
	}
});
});

Comments

[michael-9]

в первом табе, который рендерится первым, цвет применяется?

[Kardamon_mchl]

michael-9, нет

Answer 1

[Глюкъ Виртуален]

Решение через жопу, простите.
Присваивайте цветные классы еще на этапе формирования страницы. И не жабоскриптом естественно.

colorClass = '';
text = 'отсуствует';
if (product->quantity > 0) {
    colorClass = 'active';
    text = 'В наличии';
} elseif (...){
    (...)
}

Затем в html выводите эти переменные, заранее формируя paragraph.