Как использовать JQuery для отображения только дочерних элементов div?

Question

Итак, у меня есть функция jquery, которая должна показывать скрытый диапазон класса при наведении курсора.Как настроить функцию таким образом, чтобы она отображала только дочерний диапазон выбранного div (вместо отображения всех диапазонов на странице)?

Вот моя функция jquery:

$(".thumb").hover(
    function() {
       $(".blurb").show();
    },
    function(){
       $(".blurb").hide();
    }
);

посмотрите jsfidde здесь .Спасибо!

Answer 1

Вот для чего this!

$(".thumb").hover(
    function() {
       $(this).children('.blurb').show();
    },
    function(){
       $(this).children('.blurb').hide();
    }
);

Answer 2

Используйте $(this).children() вместо повторного выполнения глобального запроса:

$(".thumb").hover(function() {
    $(this).children().show();
}, function() {
    $(this).children().hide();
});

Рабочая демоверсия: http://jsfiddle.net/h5x3f/2/

Примечание: если вам не нужна поддержка Internet Explorer 6, вы можете полностью отказаться от jQuery / JavaScript и использовать псевдокласс CSS :hover, который будет работать даже с отключенным JS. Или вы можете использовать подкладку типа ie-7.js для обработки :hover для вас. См. этот вариант вашей скрипки для примера.

Answer 3

здесь у вас есть другое решение, использующее функцию 'find':

    $(".thumb").hover(
        function() {
            $(this).find(".blurb").show();
        }, function() {
            $(this).find(".blurb").hide();
        }

    );

Answer 4

Сначала выберите div, а затем его потомков, например,

$("#mydiv").children(".blurb").show();