jQueryObject.has

 JavaScript
2013.07.03
jQueryObject.has(selector);

 

jQueryオブジェクトが持っているメソッドで、便利だと思ってるランキング。

 

 

・・今日はギリギリ入賞した .has()について。

.has() | jQuery API Documentation

 

以前、.filter()メソッドと何が違うのって思ったので備忘の比較。
下みたいなDOM構造だったとして、

<div class="fruits odd">
    <h2>Apple</h2>
    <ul>
        <li class="my_favorite">ふじ</li>
        <li>つがる</li>
        <li>ピンクレディー</li>
    </ul>
</div>
<div class="fruits even">
    <h2>Grape</h2>
    <ul>
        <li>巨峰</li>
        <li>ロザリオ ビアンコ</li>
        <li>瀬戸ジャイアンツ</li>
    </ul>
</div>

 

my_favoriteな品種を "子孫要素に" もつ果物がほしければ

alert($('.fruits').has('li.my_favorite').find('h2').text());

 

"自分自身が" 偶数番目である果物がほしければ

alert($('.fruits').filter('.even').find('h2').text());

です。

 

どちらも呼び元のjQueryオブジェクトのフィルタリングとして動作しますが

.has()は「子孫の状態」 .filterは「自分自身の状態」がその条件になります。

おもしろい。

 

 

以下、サンプルのHTML。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Sample of jQuery's .has() method</title>
  </head>
  <body>

<div class="fruits odd">
  <h2>Apple</h2>
  <ul>
    <li class="my_favorite">ふじ</li>
    <li>つがる</li>
    <li>ピンクレディー</li>
  </ul>
</div>
<div class="fruits even">
  <h2>Grape</h2>
  <ul>
    <li>巨峰</li>
    <li>ロザリオ ビアンコ</li>
    <li>瀬戸ジャイアンツ</li>
  </ul>
</div>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
  <script>
  (function ($) {
    $(document).ready(function () {
      var has = $('.fruits').has('li.my_favorite'),
          fil = $('.fruits').filter('.even');
      alert("$('.fruits').has('li.my_favorite') => "+has.find('h2').text());
      alert("$('.fruits').filter('.even') => "+fil.find('h2').text());
    });
  })(jQuery);
  </script>
  </body>
</html>