by shigemk2

当面は技術的なことしか書かない

子要素と兄弟要素のズレ

jQuery

こんな感じの簡単なHTMLがあったとしましょう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="./ex4.css" />
    <script type="text/javascript" src="./js/jquery-1.4.4.min.js"></script>
    <title>Hoge</title>
  </head>
  <body>
    <ul class="sakurai">
      <li class="testarossa"><a>越智にゃん</a></li>
      <li class="testarossa"><a>金沢</a></li>
      <li class="testarossa"><a>二馬鹿</a></li>
      <li class="testarossa"><a>半ズボン氏</a></li>
    </ul>
  </body>
</html>
<script type="text/javascript">
    jQuery(document).ready( function($) {
	$("li.testarossa").click( function() {
	    alert($("a", this).text());
	});
    });
</script>

ちなみにCSSはこれ。

li.testarossa {
  font-size: 18px;
}

liのところをクリックすると、classを指定しておりますから、
すべての子要素のテキストを出力したかったのです。
でも違いました。

越智にゃんをクリックしても越智にゃんしか出力されません。

このことから分かるのは、classを有するliの子要素はそのliの中の要素だけで、
他のliの中の要素にはノータッチだということが判明しました。

てっきりclassで指定したものの子要素はliの中身全部なのかと…

で、他のliのテキストを出力したい、idを取得したいとかなると、兄弟要素の概念が必要になります。

他のliの要素は、(限りなく腹違いか何かに近い)兄弟要素なんです。
というわけで、siblingsを使い、JSの部分を書き換えます。

siblings(expr) - jQuery 日本語リファレンス

    jQuery(document).ready( function($) {
	$("li.testarossa").click( function() {
            console.log($(this).siblings().find("a"));
	});
    });

するとどうでしょう。

Object [越智にゃん, 金沢, 二馬鹿]

半ズボン氏をクリックすると、このように出力することが出来ました。