eine Klasse zu finden, in jQuery

Question

zu Eltern gehören,

Der Versuch, einige divs schweben mit bewegen, das ist mein Markup:

<div class="item dark-grey"> 
    <div class="img"> 
     <img src="images/case-study-develop.jpg" width="174" height="59" alt="Case Study"> 
    </div> 
    <div class="triangle-container"> 
     <div class="triangle-border-light-blue"></div> 
     <div class="triangle-dark-grey"></div> 
    </div> 
    <div class="content light-blue"> 
     <h2><a href="#">Developing community work with the voluntary sector</a></h2> 
    </div> 
</div> 

Dies ist, was ich im Moment bin mit, der gut arbeitet, aber ich will nur das Schweben auf dem Inhalt div, nicht das gesamte Element div.

$(document).ready(function() { 
      $('.item').hover(function(e){ 
        $('.img', this).animate({height: "30px"},100); 
      },function(e){ 
        $('.img', this).animate({height: "58px"},100); 
      }); 
    }); 

Ich dachte, wenn ich über .item .content schweben und dann die Eltern erhalten, und finden .img dem Mutter gehören, würde es funktionieren, aber ich bin nicht sicher, ob ich es richtig mache.

$('.item .content').hover(function(e){ 
       $(this).parents('.img').animate({height: "30px"},100); 
} 

Answer 1

Was Sie haben, wird nicht funktionieren, weil .img kein Elternteil von .content ist, es ist ein Geschwister.

können Sie überprüfen die siblings() von .content():

$('.item .content').hover(
    function(e){ 
     $(this).siblings('.img').animate({ height: "30px" }, 100); 
    }, 
    //function... 
}); 

Oder Sie können die DOM an die Eltern von .content durchqueren und dann find('.img'):

$('.item .content').hover(
    function(e){ 
     $(this).parent().find('.img').animate({ height: "30px" }, 100); 
    }, 
    //function... 
}); 

Oder wenn Sie, dass die structrue garantieren von diesen divs wird nie ändern, können Sie prev():

$('.item .content').hover(
    function(e){ 
     $(this).prev().prev().animate({ height: "30px" }, 100); 
    }, 
    //function... 
}); 

verwenden

Answer 2

Es klingt wie Sie dies wünschen:

$('.item .content').hover(function(e) { 
    $(this).closest('.item').find('.img').animate({height: "30px"}, 100); 
}, function(e) { 
    $(this).closest('.item').find('.img').animate({height: "58px"}, 100); 
}); 

Die für Hover auf das .content Objekt beobachten wird und wenn das Hover-Ereignis eintritt, wird es die .item Behälter und dann findet das .img Objekt findet in diesen Container und animiere ihn.

Einer der Schlüssel hier ist .closest(), der den ersten Vorgänger findet, der einem gegebenen Selektor entspricht, der wirklich nützlich ist, um einen spezifischen Behälter div zu finden.

Answer 3

Die <img /> ist kein Elternteil des Elements .item .content, so dass Sie das nicht verwenden können.

Sie können mit closest() zum Element .item navigieren und dann das Element .img von dort abrufen;

$(this).closest('.item').children('img').animate({height: "30px"},100); 

Obwohl, wie das .img Element ist ein Geschwister des .item .content Element, das Sie tun können;

$(this).siblings('.img').animate({height: "30px"},100); 

Weitere Informationen finden Sie in der siblings() und closest() Dokumentation.

Answer 4

$(this).parent().find('.img') 

sollte