2

次のような HTML があります。

<div class="group_box">
  <div>
     <div>
       ... <!-- I don't know haw many div's here -- >
       <a class="mark_as_read" ...>
     </div>
  </div>
<div>

....

<div class="group_box">
  <div>
     <div>
       ... <!-- I don't know haw many div's here -- >
       <a class="mark_as_read" ...>
     </div>
  </div>
<div>

ユーザーが「mark_as_read」をクリックしたときに親「group_box」を非表示にしたい。

このようなもの：

<script type="text/javascript">
  $().ready(function() {
    $('.mark_as_read_link').bind('click', function() {
      alert($(self));
      $(self).parent('.group_box').hide();
      return false;
    });
 });
</script>

しかし、うまくいきません。この場合、 $(this) が何であるかわかりません....

4

3 に答える 3

8

代わりに、セレクターに一致する要素が見つかるまでDOMをトラバースするメソッド.parent()を使用できます。.closest()

<script type="text/javascript">
  $().ready(function() {
    $('.mark_as_read_link').on('click', function() {
      $(this).closest('.group_box').hide();
      return false;
    });
 });
</script>

例では、の.on()代わりに使用し.bind()ます。jQuery 1.7以降、イベントリスナーをアタッチするため.bind()に非推奨になりました。.on()

アップデート：

Joonasがコメントで指摘しているように、上記のよう.parents()にではなく、この方法を使用することも可能.closest()です。違いは.parents()、セレクターに一致する要素に遭遇した場合でもDOMをトラバースし続け、一致する要素が.closest()見つかるとすぐにトラバースを停止することです。この場合.closest()、目的により適していると思いますが、.parents()代わりに使用することを検討している場合は、ドキュメントに記載されている違いを次に示します。

.closest（）

  • 現在の要素で始まります
  • 提供されたセレクターに一致するものが見つかるまで、DOMツリーを上に移動します
  • 返されるjQueryオブジェクトには、元のセットの要素ごとに0個または1個の要素が含まれています

。両親（）

  • 親要素で始まります
  • DOMツリーをドキュメントのルート要素に移動し、各祖先要素を一時的なコレクションに追加します。次に、セレクターが提供されている場合は、セレクターに基づいてそのコレクションをフィルタリングします
  • 返されるjQueryオブジェクトには、元のセットの各要素に対して0個以上の要素が含まれています
于 2012-11-12T11:25:35.490 に答える
4

jQuery 関数を使用する必要がありますclosest()。最も近い親を返します。

<script type="text/javascript">
  $(document).ready(function() {
    $('.mark_as_read_link').click(function(){
      $(this).closest('.group_box').hide();
      return false;
    });
 });
</script>

ps $(self) 意味がありません。現在の要素に $(this) を使用します

于 2012-11-12T11:24:14.893 に答える
0

onYouこのようなもの

<script type="text/javascript">
   $().ready(function() {
     $("body").on('click','.mark_as_read', function() {
         $(this).closest('.group_box').hide();
        return false;
      });
   });

代わりにOnを使用すると、bindは非推奨になります

于 2012-11-12T11:30:22.040 に答える