how can I filter on an element that must have more than one class

Question

HTML:

<div class="scrollBlock" tabIndex="4">
        <ul id="dropdown-reg-phone-type">
            <li>
                <div class="header tzSelected">Home</div>
                <div class="optkey">0</div>
            </li>
            <li>
                <div class="header">Work</div>
                <div class="optkey">1</div>
            </li>
            <li>
                <div class="header">Cell</div>
                <div class="optkey">2</div>
            </li>
        </ul>
    </div>

jQuery:

var $listItems = $('li');


var $selected = $listItems.filter('div.header.tzSelected'),
console.dir($selected);

if (!$selected.length) {
    console.log("selected doesn't exist");
}

This returns "selected doesn't exist", even though there is a div that has the .tzSelected class. I'm guessing the filter isn't set up correctly, but can't figure out why. $listItems is correct; then from there I need to find the div that has both the header and tzSelected classes.

The console.dir line shows this:

Answer 1

For your particular case, you should be able to do it entirely using the selector itself:

var $selected = $('li div.header.tzSelected');

Answer 2

.filter() operates directly on the li elements within $listItems, not by the elements inside them. If you're trying to select their descendants, you need to use .find() instead:

var $selected = $listItems.find('div.header.tzSelected')