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');
       }
    }
});

此外，如果您想计算匹配的 div 的数量，您可以更改分配给此的计数器值：

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 的示例，以便您获得更多您期望的结果（并且还要注意 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');
}
});