JQueryで上手く要素を取得できない。

Question

質問しつれいします。

現在javaScript(JQuery)を使用しスマホ用のメニューを作っています。

しかし開いたメニューが閉じれないです。
上手く親の親要素を取得できていないのかなと思いますが何をやっておも思い通りの動きにならないので皆さんのお力をお借しください。

HTML

	<div id="navi_sp"><a>MENU</a></div><!-- スマホ用MENUボタン -->
	<div id="navi_wrapper">
		<ul id="navi_menu">
			<li class="menu" id="close"><a class="menu_name">CLOSE</a></li>
			<li class="menu"><a class="menu_name" href="index.php">Home</a></li>
			<li class="menu"><a class="menu_name" href="index.php">Home</a></li>
			<li class="menu"><a class="menu_name" href="index.php">Home</a></li>
			<li class="menu"><a class="menu_name" href="index.php">Home</a></li>
			<li class="menu"><a class="menu_name" href="index.php">Home</a></li>
			<li class="menu"><a class="menu_name" href="index.php">Home</a></li>
		</ul>
	</div>

javaScript

    $('#navi_sp').click(function(){
        $(this).siblings('div #navi_wrapper').show(1000);
    });

    $('#close').click(function(){
	$(this).parent().parent().prev().hide(1000);
    });

上記以外にも

$(this).parents('div #navi_wrapper').prev('div #navi_sp').hide(1000);
$(this).parent('#navi_menu').parent('#navi_wrapper').prev('#navi_sp').hide(1000);

等いろいろ試してみましたが駄目でした。

Answer 1

これでいいと思います。

    $('#close').click(function(){
      $(this).parents('.navi_wrapper').hide(1000);
    });

.parent()は親要素。.parents(要素)で祖先まで遡って見つかった要素が取得できます。

もしくはこれでもいいかも。

    $('#close').click(function(){
      $('.navi_wrapper').hide(1000);
    });

指定している親要素がきちんと取れているかどうかは、alert()やconsole.log()で思い通りの要素が指定できているか確認してみるといいです。

alert($(this).parent().parent().prev().att('id')); // ここで希望の要素のID（クラス）が返ってたらOK

Comments

[ringoame49]

ご回答ありがとうございます。

hideを適応する場所（取得すべき要素）を完全に勘違いしていました。
こんなことで2日も費やしてしまった自分がバカみたです( ﾟДﾟ)

また、思い通りの要素が指定できているか確認の方法もお教えくださりありがとうございます!
ぜひ活用していきます！