jquery - jQuery でオブジェクトを閉じる

Question

私は助けが必要です。私はこのようなHTMLコードを持っています、

<div class="close">Close</div>
<table class="table"><tr><td>One</td><td>Two</td></tr></table>

<div class="close">Close</div>
<table class="table"><tr><td>One</td><td>Two</td></tr></table>

<div class="close">Close</div>
<table class="table"><tr><td>One</td><td>Two</td></tr></table>

ユーザーが[閉じる]をクリックした現在のテーブルのみをjqueryで閉じるにはどうすればよいですか。ありがとう 。

Answer 1

マークアップがそのままであると仮定します ( のtable直後に がありますdiv):

$(".close").on("click", function () {
    $(this).next().hide();
});

イベント ハンドラーを DOM ツリーの上位に委譲することで、これをもう少し効率的にすることができます (いくつかの共通の祖先要素にバインドし、.closeセレクターを の 2 番目の引数として渡します.on())。

参考文献:

• .on()
• .next()
• .hide()

Answer 2

これを試して

HTML

<div class="close">Close</div>
<table class="table"><tr><td>One</td><td>Two</td></tr></table>

<div class="close">Close</div>
<table class="table"><tr><td>One</td><td>Two</td></tr></table>

<div class="close">Close</div>
<table class="table"><tr><td>One</td><td>Two</td></tr></table>

JS

$('div.close').on('click', function(){
    $(this).next().hide();
});

http://jsfiddle.net/F3EXf/6/

Answer 3

この方法でそれを閉じることができます：

$(document).on('click', '.close', function() {
    $(this).next().hide();
});