jQuery: Apply class to all 'anchor' tags of a scpecific div

Question

I have this script:

<script type="text/javascript">

$(function() {
    $("a", "top_menu").addClass("ui-widget ui-state-default");
});

</script>

What I want to do, is apply those classes to all anchor tags of the next div:

<!-- Top menu -->
<div class="top_menu">
    <a href="test">An anchor</a>
    <a href="test1">Second Anchor</a>
</div>
<!-- End Top menu -->

But it has to only apply to anchor tags of 'top_menu' div.

What's missing?, thank you.

Answer 1

the selector you're using is wrong .. try instead

$(function() {
    $("a", "div.top_menu").addClass("ui-widget ui-state-default");
});

Answer 2

You are specifing all top_menu elements as scope, but there is no such HTML element. You want to use the selector ".top_menu" instead to specify the class.

Instead of specifying both a scope and a selector, you can use a single selector:

$(".top_menu a").addClass("ui-widget ui-state-default");