How to specify to do a function in a specific area only, in jQuery?

Question

I have this jQuery snippet:

$(function() {
        $("ul > li").hover(function() {
          $(this).find("ul").stop(true, true).animate({opacity: 'toggle'}, 'fast');
        });
    });

This opens every <ul> what's inside in another <ul>, but I want to make this only for :

<div id="header"></div>

EDIT

Here is the structure, I modified it a bit, originally I want to add it to my header id but that's better I think:

<ul id="navigation">
    <li>List item 1 
        <ul>
            <li>Sub List Item 1</li>
            <li>Sub List Item 2</li>
            <li>Sub List Item 3</li>
        </ul>
    </li>
    <li>List Item 2</li>
    <li>List Item 3</li>
</ul>

Please don't eat me if the question is stupid I'm really really new in jQuery :)

Answer 1

Assuming that there's only one ul within the #navigation div:

$('#navigation ul > li').hover( /* rest of jQuery function */ );

The selector used, above, selects only li elements that are direct descendants of a ul that is itself a descendant of an element of id="navigation".

You could, also, simply apply an id to the ul, for example id="navList" and then use:

$('#navList > li').hover( /* rest of jQuery function */ );

---

Edited following OP's changed question/posted (x)html.

Given the following mark up:

<ul id="navigation">
    <li>List item 1 
        <ul>
            <li>Sub List Item 1</li>
            <li>Sub List Item 2</li>
            <li>Sub List Item 3</li>
        </ul>
    </li>
    <li>List Item 2</li>
    <li>List Item 3</li>
</ul>

And assuming that he wants the user to hover over the li elements to reveal that lis child ul:

$('#navigation > li').hover(
// selects any li that's a direct descendant of the ul with id="navigation"
    function() {
        $('ul', this).stop(true,true).animate({opacity:'toggle'},fast);
        // looks for 'ul' elements inside the currently-selected 'this' object.
        // have a look at the jQuery api for more information on this approach: http://api.jquery.com/jQuery/
    }
);

Please note that I haven't tested the function you're trying to apply, I take it on trust that you've already got it working.

Answer 2

David is correct, or add a class or ID to your <UL> and target it directly: $('ul#ul-id').hover( /* .... */ );

Answer 3

Just change

$("ul > li")

To

$("#header ul > li")

This is going to limit the elements for the ones inside the header div.

Answer 4

BrunoLM provides a good answer, just change the jQuery selector to #header ul > li. jQuery understands CSS.

But a good thing to know about in jQuery is that you can provide a context for your jQuery selector. Normally a jQuery selector looks in the entire DOM. If you want to narrow this or have it look somewhere else provide a context. To look for this in a context use the form:

$(this, context)

In your specific case this would be:

$(function() {
    $("ul > li", "#header").hover(function() {
        $(this).find("ul").stop(true, true).animate({opacity: 'toggle'}, 'fast');
    });
});

Now, the context works by internally applying .find(), so the above is synonymous to:

$(function() {
    $("#header").find("ul > li").hover(function() {
        $(this).find("ul").stop(true, true).animate({opacity: 'toggle'}, 'fast');
    });
});

The above two methods are very useful if you can't apply CSS to the problem... Let's say you're creating a DOM element on the fly, and you want to use jQuery within that element.