【jQuery】選択対象が何かをディベロッパーツールで確認する方法

jQueryではオブジェクトとして選択した対象を、親や子、次の要素などに選択対象を移動させることができます。
例えば、

Html

 <div id="mother">
    親要素
    <div id="child">
      子要素
    </div>
  </div>

Js

$('#mother')
  .children()
  .css({ 'color': 'red' });

この場合、初めに選択したmotherから、その子要素のchildに選択対象が移動しています。
これだけで十分便利な機能ですが、Htmlが複雑で初めに選択したオブジェクトから移動させたい目的のオブジェクトまで遠いと、Javascriptのコードが長くなって目的のオブジェクトを指定したいのに迷子になってしまうことがあります。

そこで、console.logをつかってディベロッパーツールで移動先の選択対象が何かを確認する方法について紹介します。

選択対象が何かをディベロッパーツールで確認する方法

以下のようなHtmlを用意しました。

Html

 <div id="mother">
    親要素
    <div id="child">
      子要素
      <div id="grandchild">
        孫要素
      </div>
    </div>
  </div>
  <div id="mother-next">
    親要素の次の要素
  </div>

子要素をはじめに選択して「親要素の次の要素」に選択対象を移動させたいと思います。
その場合は、Javascriptに次のように記載します。

Javascript

 $('#child')
  .parent()
  .next()
  .css({ 
    'color': 'red'
    });

そうすると、親要素の次の要素が選択されます。

ここで、わざと選択対象の移動を間違えてみます。

 $('#child')
  .parent()
  .parent()
  .css({ 
    'color': 'red'
    });

このときに、あれ？今の選択対象はいったい何になってしまったんだ？と思いますよね。
その場合、ディベロッパーツールで今何を選択しているかを確認することができます。

まずはJavascriptに以下のように記載し、ディベロッパーツールを開きます。

console.log( $('#child')
  .parent()
  .parent());

childの親要素の親要素(このときはbody)が選択されていることを確認できます。