Target child with jQuery

I have the following code:

<div class="topLevel">
    <span class="misc pointDown"></span>
<span class="misc"></span>
<span class="b">item</span>
</div>

When I click on the topLevel I need to replace "pointDown" with "pointUp". I think I have difficulty targeting the right element.

$(".topLevel").live('click', function() {
    $(t开发者_C百科his).next("span").removeClass("pointDown").addClass("pointUp");
});

try this:

$(".topLevel").live('click', function() {
    $(this).children('.misc').first()
           .removeClass("pointDown").addClass("pointUp");
});

$('.topLevel').live('click', function() {
    $(this).children('span.pointDown').removeClass("pointDown").addClass("pointUp"); });

$(".topLevel").live('click', function() {
   $(this).find("span:eq(0)").removeClass("pointDown").addClass("pointUp");
});

Don't assume the first item is your element - it's not the proper answer (if you ask me).

$('.topLevel').click(function() {
     $(this).find('.misc.pointDown').removeClass('pointDown').addClass('pointUp');
}