JQuery selector multi-class objects

Question

Hey all, I've been trying to get a series of objects to appear that have multiple classes associated with them

<div class="Foo Bar">
    Content
</div>

<script>
    alert($('.Foo').length);
</script>

The selector above is returning 0. This is unfortunately one of those questions that is completely impossible to ask to google (at least as far as I can tell).

How can I make this query work?

To be more specific, I have a table that looks like this:

<table>
    <tr class="Location2">
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
    </tr>
    <tr class="Location3 Territory4">
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
    </tr>
</table>

When I script:

alert($('.' + (Var that = 'Territory4')).length));

I get 0.

I'm well versed in HTML and CSS and I know I shouldn't use tables etc etc, but this is a special case.

Answer 1

EDIT: Based on updated question.

Your code throws a syntax error. Bring the variable assignment out of the selector.

var that = 'Territory4';

alert( $('.' + that).length );

---

The selector is correct. I'm guessing that your code is running before the DOM is fully loaded.

Try this: http://jsfiddle.net/QWNPc/

$(function() {
    alert($('.Foo').length);
});

Doing:

$(function() {
    // your code
});

is equivalent to doing:

$(document).ready(function() {
    // your code
});

which ensures that the DOM has loaded before the code runs.

http://api.jquery.com/ready/