jQueryを使用せずにクリックされた要素のindexを取得する

参考にさせて頂いたページ

掲示板/JavaScript質問板［過去ログ］/一覧/親要素から見て、何番目の子要素がクリックされたか取得する方法 - TAG index Webサイト

JavaScriptの条件付きコンパイル - chalcedonyの外部記憶装置・出張版

参考にさせて頂いたページの該当ソース(以下は引用)

<!DOCTYPE html>
<html>
<head>
  <title>jQueryを</title>
</head>
<body>

<ul id="menu">
  <li>list</li>
  <li>list</li>
  <li>list</li>
  <li>list</li>
  <li>list</li>
</ul>

<script type="text/javascript">
<!-- 
document./*@cc_on @if (1) attachEvent('on' + @else@*/
addEventListener(/*@end@*/ 'click', (function () {
  return function (e) {
    var t = e./*@if (1) srcElement @else@*/ target /*@end@*/;
    var r;
    var i;
    if (t = getLI(t)) {
      if (r = getUL(t, 'menu')) {
        i = getChildElementCount(t);
        alert([i, t, r]);
      }
    }
  };

  function getLI (n) {
    return n ? ('LI' == n.nodeName) ? n : arguments.callee(n.parentNode) : null;
  }

  function getUL (n, id) {
    return n ? (n.id == id) ? n : arguments.callee(n.parentNode, id) : null;
  }

  function getChildElementCount (n) {
    for (var i = 0; n = n.previousSibling; (n.nodeType == 1) && i++);
    return i;
  }
})(), false);
//-->
</script>

</body>
</html>

参考にさせて頂いたソースについて

JavaScriptの条件付きコメント書式が含まれていた。
そんなものがJavaScriptにあるとは知らなかったので図らずも学習した。
タグ名などもとれるようになっている。

参考にしつつ自分で書いてみたソース

<!DOCTYPE html>
<html>
<head>
  <title>jquery.flatheight.jsの試作</title>
</head>
<body>

<div id="menu">
  <div>div</div>
  <p>p</p>
  <div>div</div>
  <p>p</p>
  <div>div</div>
</div>

<script type="text/javascript">
function getChildElementCount (n) {
  //引数として受け取るnはクリックされた要素t
  //for文、i=0; n.previousSiblingがtrueの間は繰り返し、nのnodeTypeがelementNodeのときi++する。
  //これによりクリックされた要素より前に兄要素がi個存在する事がわかるので、それはクリックされた要素のインデックスがelement[i]である事がわかる。
  for (var i = 0; n = n.previousSibling; (n.nodeType == 1) && i++);
  return i;
}

var clickFunc = function(e){
  var t = (e.srcElement || e.target);
  var clickedElementIndex = getChildElementCount(t);
  alert(clickedElementIndex);
}

if(document.addEventListener){
  document.addEventListener('click', function(e){clickfunc(e)}, false);
}else if(document.attachEvent){
  document.attachEvent('click', function(e){clickfunc(e)});
}
</script>

</body>
</html>

参考にしつつ自分で書いてみたソースについて

とりあえずindexの取得はできるようになった。
でもドキュメントにクリックイベントを関連づけているせいか、どこをクリックしても0がalertされる。
バブリング止めたりとかそういうのも必要なのかもしれない。
そのうち直そう。

自分で書いたソースも何か見慣れない書き方をしている箇所があるので、他にも参考にさせて頂いたサイトがあるかもしれないけど、ブログ始めるよりずっと前に書いたので覚えていない。
もっとよく探した方が良いかもしれない。

取得したかったのはindexだけだったのと、条件付きコメントも慣れていないせいか読みにくいので、初めてのJavaScriptの文中にあるようなif文で書いた。

特にハマったのはクリックされた要素の兄要素の数を取得するところ。
n.nodeType==1;としないと半角スペースなどの数も含めて数えてしまうっぽい。
nodeTypeとかわかっていないので駄目だった。

jQueryだとそういうの理解してなくても、できちゃうからな。
JavaScript少しずつ学習しよう。

直したり、nodeTypeのことについては後日調べよう。

Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。