jQuery でよく使うセレクタ

jQuery でよく使うセレクタの使い方のメモ。

以下の DOM に対してセレクタを試してみます。

  <div id="d1">
    <div id="d2-1">
      <div id="d3-1">
        <p id="p4-1">p4-1 text</p>
        <p id="p4-2">p4-2 text</p>
      </div>
      <div id="d3-2"></div>
    </div>
    <div id="d2-2">
      <div id="d3-3"></div>
      <div id="d3-4"></div>
      </div>
    </div>
  </div>

■id指定

  d = $('#d1');
  console.log(d.attr('id'));
  console.log(d.constructor.name);
-->
d1
S

■子要素のタグ指定

  ns = $('#d1 > div');
  console.log(ns.length);
  console.log(ns[0].constructor.name);
  console.log($(ns[0]).attr('id'));
  console.log($(ns[1]).attr('id'));
-->
2
HTMLDivElement
d2-1
d2-2

■子孫のタグ指定

  ps = $('#d1 p');
  console.log(ps.length);
  console.log(ps[0].constructor.name);
  console.log($(ps[0]).text());
  console.log($(ps[1]).text());
-->
2
HTMLParagraphElement
p4-1 text
p4-2 text

■子孫のタグ指定

  ps = $('#d1 p');
  console.log(ps.length);
  console.log($(ps[0]).text());
  console.log($(ps[1]).text());
-->
2
p4-1 text
p4-2 text

■子孫を検索

  d = $('#d1');
  ps = d.find('p');
  console.log(ps.length);
  console.log($(ps[0]).text());
  console.log($(ps[1]).text());
-->
2
selector1.html:82 p4-1 text
selector1.html:83 p4-2 text

■前の要素

  console.log('前の要素');
  d = $('#d2-2').prev();
  console.log($(d).attr('id'));
-->
d2-1

■次の要素

  d = $('#d2-1').next();
  console.log($(d).attr('id'));
-->
d2-2