jQueryでのDOMの便利な使い方

例えば、hoverでバルーンヘルプを出したいようなシチュエーション。

チェックボックスの横に文字を置き、その文字にカーソルを乗せるとヘルプが出るようにしたい。
チェックボックスから文字までは、labelタグを使うことで文字をクリックしてもチェックできるようにしたい。

<label>
	<input type="checkbox" name="name" value="1">
	国語
</label>

で、チェックボックスの横の文字に合わせたときだけ、ヘルプを出すようにしたい。

<label>
	<input type="checkbox" name="name" value="1">
	国語
</label>
<dl class="arrow_box">
	<dt>現代文</dt>
	<dd>てにをはから始める国語</dd>
</dl>

CSSで、display: noneを使ってヘルプは予め非表示にしておく。

.arrow_box {
  display: none;
  position: absolute;
  padding: 10px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;  
  border-radius: 8px;
  background: rgba(4, 137, 177, 0.7);
  background: #0489B1\9; /*IE8用*/
  color: #fff;
  z-index:10;
}

.arrow_box:after {
  position: absolute;
  bottom: 100%;
  left: 30%;
  width: 0;
  height: 0;
  margin-left: -30px;
  border: solid transparent;
  border-color: rgba(51, 51, 51, 0);
  border-bottom-color: rgba(4, 137, 177, 0.7);
  border-bottom-color: #0489B1\9; /*IE8用*/
  border-width: 10px;
  pointer-events: none;
  content: " ";
}

表示と非表示を切り替えるのはJavascript。jQueryを使えばDOMも簡単に見つかる。
ヘルプを表示したい部分をspanタグで囲む。

<label>
	<input type="checkbox" name="name" value="1">
	<span class="hov">
	国語
	</span>
</label>
<dl class="arrow_box">
	<dt>現代文</dt>
	<dd>てにをはから始める国語</dd>
</dl>

階層的には、spanの親のlabelの次のdlタグの内容を表示させる。

$(function () {
$(".hov").hover(
  function () {
    $(this).parents('label').next('dl').show();
  },
  function () {
    $(this).parents('label').next('dl').hide();
  }
);
});

parentが一つ親を求めるのに対し、parentsメソッドは親の再帰的な集合。引数を指定することで絞込ができる。
なぜこんなことをするかというと、nextメソッドのため。nextメソッドは同じ階層で探すため。