マウスジェネレータがdiv jqueryと連携していません

Question

マウスを入力すると、その中にボタンが表示されます。例えば、ここでdivのためのコードです：

<div id="menuitem1" style="height: 50px;" class="menuitem"> 
    <input type="button" class="menuclear" value="Clear" style="margin-left: 10px; display: none;"/> 
</div> 

そしてここでは、jqueryのコードは次のとおりです。

$(".menuitem").mouseenter(function() { 
$(this).next(".menuclear").show(); 
}); 

このコードは、しかし、動作しません。私はマウスオーバーとホバーを試みましたが、まだ何もしていません。マウスがdivに入ったときにボタンを表示するようにコードを変更するにはどうすればよいですか？これらのアイテムには特定のIDを与えることができないことに注意することが重要です。これは、同じクラスの他のdivやボタンが約30あるためです。

Answer 1

nextは、次の兄弟を取得します。この場合、.menuclearは兄弟ではなく、子供です。代わりにfindまたはchildrenを使用します。

$(".menuitem").mouseenter(function() { 
    $(this).find(".menuclear").show(); 
}); 

Answer 2

私は次の関数は（それが要素の後に兄弟を取得し、指定されたクラスのためにそれらをチェックします）間違っている、あなたのコードが動作すると思います。

$(".menuitem").mouseenter(function() { 
    $(this).find(".menuclear").show(); 
});