Jquery $ (this) Child Selector не работает по неизвестной причине

Question

Я пытаюсь показать / скрыть дочерний класс, когда родительский элемент находится над ним.У меня есть несколько классов, как в Jquery $ (this) Child Selector .

по какой-то неизвестной причине, он не работает.1008 *

Также

$("div.childitem").css({visibility: "hidden"});

$("div.parentitem").mouseenter(function(){
    $("div.childitem").css({visibility: "visible"});
});

$("div.parentitem").mouseleave(function(){
    $("div.childitem").css({visibility: "hidden"});
});

Это работает, но затронуты все дети.Я хотел повлиять только на определенный div и его потомок

Я пытался использовать

$(this).children("div.childitem").css({visibility: "visible"});

$(this).parent().children("div.childitem").css({visibility: "visible"});

$(this).next("div.childitem").css({visibility: "visible"});

По какой-то причине ничего из этого не работает.

Может кто-нибудь указать мне, где я ошибся.

Спасибо

Дипак

Answer 1

Попробуйте:

$("div.childitem").css({visibility: "hidden"});

$("div.parentitem").mouseenter(function(){
    $(this).find('.childitem').css({visibility: 'visible'});
});

$("div.parentitem").mouseleave(function(){
    $(this).find('.childitem').css({visibility: 'hidden'});
});

JS Fiddle demo .

Answer 2

Попробуйте $(this).find("div.childitem") вместо $(this).children("div.childitem").

children() находит только непосредственных детей, в то время как find() ищет среди всех детей, то есть детей и их детей и т. Д.

Если это все еще не работает, я предлагаю проанализировать порядок, в котором вызываются все связанные обработчики событий. Возможно, результат обработчиков событий mouseenter мгновенно отменяется каким-либо другим обработчиком событий.

В Chrome или с Firebug в Firefox вы можете войти в консоль. Например. для Chrome это console.log(text_or_object).

Answer 3

Это может быть интересно: http://jsfiddle.net/DrkwB/2/

Я только что изменил существующий пример для размещения нескольких областей содержимого, а затем для конкретного родительского элемента, на котором наведен курсор, его дочерний элемент скрыт или соответственно показан.

Answer 4

Вам нужно использовать $ (this) в качестве селектора context т.е.

$("div.childitem",$(this))

Хотя, возможно, есть более элегантное решение ...

Answer 5

Я думаю, это то, что вам нужно:

$("div.parentitem").mouseenter(function(){
    $(this).find("div.childitem").css({visibility: "visible"});
});