jQueryの：私はクラス名を持つDIV「アクション」に必要な画像の上にマウスを移動するとき、jQueryのを使用して

Question

<div id="item"> 
    <div class="action"> 
     Oh! Look, a squashed pea! 
    </div> 
    <img class="picture" src="example"> 
</div> 

兄弟選択します。 ホバリング部分は落ち着いていますが、セレクタ部分では苦労しています。私は、運と「アクション」クラスと兄弟、親を選択しようとした

...

EDIT：詳細は、私が追加されているはずですが、不器用読みやすくしようとしていませんでした - 私の悪い。

<div id="item"> 
    <div class="action"> 
     <span>Oh! Look, a squashed pea!</span> 
     <button id="add">Hello</button> 
    </div> 
    <img class="picture" src="example"> 
</div> 

私は、任意のIDを参照することなく適用.actionクラスとDIVへの参照の後に、まだです。

Answer 1

$("#item img") 
    .on("mouseover", function(){ 
    var prevAction = $(this).prev(); 
    prevAction 
     .css("background-color","red"); 
}); 

私たちは、直前の要素を選択するために、prev()を使用しています。 （背景色を赤に設定しますが、それはあなたが変更する部分です）。この場合、選択する要素は変数prevActionに格納されます。

EDIT：あなたの更新のために：

$("img.picture") 
    .on("mouseover", function(){ 
    var prevAction = $(this).prev(); 
    prevAction 
     .css("background-color","red"); 
}); 

代わりにID itemでのdiv内の画像を選択するのは、クラスpictureで画像を選択します。これは、同じクラスの画像が#item個のdivの外にある場合、他の要素と競合する可能性があります。その場合、あなたはおそらくセレクタは、より具体的にすることができます：

$("div img.picture") 

これは（関係なく、IDまたはクラスの）任意のdiv要素内のクラスpictureで画像を選択します。

Answer 2

.prev()を使用すると、前の兄弟を取得できます。あなたのホバー機能内では、次のようになります。

$(this).prev();