Как указать, чтобы сделать функцию только в определенной области, в jQuery? - PullRequest
Новая
       14

Как указать, чтобы сделать функцию только в определенной области, в jQuery?

2 голосов
/ 30 сентября 2010

У меня есть этот фрагмент jQuery: 

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

Это открывает каждый <ul> что внутри в другом <ul>, но я хочу сделать это только для :

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

EDIT

Вот структура, я немного ее изменил, изначально я хочу добавить ее к своему header id, но я думаю, что это лучше: 

<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>

Пожалуйста, не ешьте меня, если вопрос глупый, я действительно новичок в jQuery:)

Ответы [ 4 ]

3 голосов
/ 30 сентября 2010

Предполагая, что в #navigation div есть только один ul: 

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

Используемый выше селектор выбирает только li элементы, которые являются прямыми потомками ul, который сам является потомком элемента id="navigation".

Вы также можете просто применить идентификатор к ul, например id="navList", а затем использовать: 

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

<ч /> Отредактировано после изменения вопроса ОП / опубликовано (x) html.

С учетом следующей разметки: 

<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>

И при условии, что он хочет, чтобы пользователь наводил курсор на элементы li, чтобы показать, что li s 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/
    }
);

Обратите внимание, что я не проверял функцию, которую вы пытаетесь применить, я верю, что она уже работает.

2 голосов
/ 30 сентября 2010

Просто измените 

$("ul > li")

На 

$("#header ul > li")

Это будет ограничивать элементы для элементов внутри header div.

2 голосов
/ 30 сентября 2010

Дэвид прав, или добавьте класс или идентификатор к вашему <UL> и нацелите его напрямую: $('ul#ul-id').hover( /* .... */ );

1 голос
/ 30 сентября 2010

BrunoLM дает хороший ответ, просто измените селектор jQuery на #header ul > li. jQuery понимает CSS.

Но хорошо знать, что в jQuery вы можете предоставить контекст для вашего селектора jQuery. Обычно селектор jQuery просматривает весь DOM. Если вы хотите сузить это или посмотреть, предоставьте контекст. Для поиска this в context используйте форму: 

$(this, context)

В вашем конкретном случае это будет: 

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

Теперь контекст работает путем внутреннего применения .find(), поэтому вышеприведенное является синонимом: 

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

Приведенные выше два метода очень полезны, если вы не можете применить CSS к проблеме ... Допустим, вы создаете элемент DOM на лету и хотите использовать jQuery внутри этого элемента.

...