jQuery - стиль, если переменные совпадают внутри элемента

Question

Как применить стиль к div , только если две переменные совпадают в этом div?

Мне кажется, я неправильно использую метод jQuery .each().

Моя цель - применить изменение цвета только к первому div.main на основе сопоставления текста из двух элементов. Переменные a и b совпадают в первом div.main. Эти переменные не совпадают во втором div.main.

Но вместо того, чтобы изменить цвет на первый div.main, я получаю "no matches exist."

Я не спрашиваю, как просто назначить стиль для div. Я спрашиваю, как оформить div, только если текст двух элементов внутри div совпадает.

Заранее спасибо за помощь!

https://jsfiddle.net/md32/ue1t3pov/35/

<div class="main">
    <a>
        <span>make this red</span>
    </a>
    <div class="section">
        <div></div>
        <ul>
            <li>make this red</li>
        </ul>
    </div>
</div>

<div class="main">
    <a>
        <span>don't make this red</span>
    </a>
    <div class="section">
        <div></div>
        <ul>
            <li>again, don't make this red</li>
        </ul>
    </div>
</div>

---

var a = $('div.main a span').text();
var b = $('div.section ul li').text();

$('div.main').each(function() { // for each 'div.main'
    if (a === b) { // if these two variables match
        $(this).css('color','red'); // color 'div.main' red
    } else {
        alert('no matches exist');
    }
});

Answer 1

ошибка в том, что вы не сравниваете правильные данные. Я изменил код javascript так, чтобы он сравнивал правильные элементы, и я изменил условие вывода на печать отсутствия совпадений. Нет совпадений будет напечатано, если ни у одного из div не было совпадения.

var counter = 0 ;

$('div.main').each(function() { // for each 'div.main'

    if ($(this).find('span').first().text() === $(this).find('li').first().text()) { // if these two variables match
        $(this).css('color','red'); // color 'div.main' red
        counter = 1;
    } else {
        if(counter === 0) {
       alert('no matches exist');
       }
    }
});

Кроме того, если вы хотите подсчитать количество совпадающих элементов, вы можете изменить значение счетчика, назначенное этому:

counter = counter  + 1;

Answer 2

Так что, мне кажется, у вас возникла логическая проблема.Вы объявляете a и b непосредственно перед началом каждого цикла.

Вы представляете, что значения a и b изменяются внутри вашего цикла.но это не так.

Я бы порекомендовал вставить оператор печати, чтобы вы могли видеть, каковы значения A & B во время цикла.( этот код распечатывается, чтобы показать вам вашу ошибку )

var a = $('div.main a span').text();
var b = $('div.section ul li').text();

$('div.main').each(function() { // for each 'div.main'
alert("a is -> "+a+"\n b is -> "+b+"\n");

if (a === b) { // if these two variables match
    $(this).css('color','red'); // color 'div.main' red
} else {
    alert('no matches exist');
}
});

Вот пример динамического присвоения a и b, чтобы вы получили больше ожидаемого (а также обратите внимание наuse first (). Если вы сначала запустили приведенный выше код и увидели, что возвращали больше, чем вы ожидали, с вашими селекторами. ( этот код делает то, что вы хотите, чтобы он делал )

var a;
var b;

$('div.main').each(function() { // for each 'div.main'

a = $(this).find("a span").first().text();
b = $(this).find(".section ul li").first().text();
console.log(a);
if (a === b) { // if these two variables match
   $(this).css('color','red');

} else {
    alert('no matches exist');
}
});