jQueryのトラバーサル

以下のページでjQueryやDOMについて学んでいます。 www.mojage.club

本記事は、jQueryのトラバーサルについて纏めています。

Sponsored Link

トラバーサル

.filter().find()の差

.filter()はラップしている要素を任意の条件でフィルタリングし、フィルタリングを必要としているファンクションへデータを渡します。

<p><strong>first</strong></p>
<p>middle</p>
<p><strong>last</strong></p>

~~~

  alert($('p').filter(':not(:first):not(:last)').text()); //  middle

.find()はラップしている要素を任意の条件で検索し、ラップしている要素を一致した要素へ変更します。

<p>middle</p>
<p><strong>last</strong></p>

  alert($('p').find('strong').get(0).nodeName); // strong

カスタムフィルタを作る前に

カスタムフィルタを作成しなくとも、.filter()とファンクションを組み合わせることで柔軟な選択が行なえます。 以下は、imgタグに画像をリンクさせ、親要素にpが無いものに対しては<p></p>で囲む処理を行っています。

<img />
<img />
<p><img /></p>
<img />
<p><img /></p>

~~~

  $('img').attr('src', 'http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif').filter(function(){return !$(this).parent('p').length == 1}).wrap('<p></p>');

親要素の指定

<div id="parent2">
  <div id="parent1">
    <div id="parent0">
      <div id="start"></div>
    </div>
  </div>
<div>

~~~

// Alerts "parent0" x4
alert($('#start').parent().attr('id'));
alert($('#start').parents('#parent0').attr('id'));
alert($('#start').parents()[0].id); // Gets actual DOM element
alert($('#start').closest('#parent0').attr('id'));

// Alerts "parent1" x4
alert($('#start').parent().parent().attr('id'));
alert($('#start').parents('#parent1').attr('id'));
alert($('#start').parents()[1].id); // Gets actual DOM element
alert($('#start').closest('#parent1').attr('id'));

// Alerts "parent2" x4
alert($('#start').parent().parent().parent().attr('id'));
alert($('#start').parents('#parent2').attr('id'));
alert($('#start').parents()[2].id); // Gets actual DOM element
alert($('#start').closest('#parent2').attr('id'));

その他のトラバーサルメソッド

  • childern('expression')
  • next('expression')
  • nextAll('expression')
  • parent('expression')
  • parents('expression')
  • prev('expression')
  • prevAll('expression')
  • siblings('expression')
  • closest('expression')

Reference from : jQuery Enlightenment