jQuery - Style If Variables Match Within Element

How do I apply a style to a div only if two variables match within that div?

I believe I'm incorrectly using the jQuery .each() method.

My goal is to apply a color change only to the first div.main based on matching text of two elements. Variables a and b match within the first div.main. Those variables don't match in the second div.main.

But rather than a color change to the first div.main, I'm getting "no matches exist."

I'm not asking how to simply assign a style to a div. I'm asking how to style a div only if the text of two elements within the div match.

Thank you in advance for the help!

https://jsfiddle.net/matthewduthie/ue1t3pov/33/

<div class="main">
    <a>
        <span>match this text</span>
    </a>
    <div class="section">
        <div></div>
        <ul>
            <li>match this text</li>
        </ul>
    </div>
</div>

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

---

var a = $('div.main a span').text();
var b = $('div.section ul li.target').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');
    }
});