[JavaScript]クリックされた要素の兄弟要素を取得する方法

html
1<!DOCTYPE html>
2<html>
3  <body>
4    <ul>
5      <li>foo</li>
6      <li class="click">click</li>
7    </ul>
8    <ul>
9      <li>bar</li>
10      <li class="click">click</li>
11    </ul>
12    <ul>
13      <li>baz</li>
14      <li class="click">click</li>
15    </ul>
16  </body>
17</html>

このようなHTMLがあるとします。<li class="click">click</li>がクリックされた時に、クリックされた要素自身の兄弟要素を取得したいです。例えば,fooと同じulタグ内に書かれているclickをクリックするとliのfoo要素が取得されるようにしたいです。

jQueryは極力使わずに実現したいと考えています。よろしくお願いします

行動規範の内容に同意します

回答4件

ベストアンサー

siblingの最初の要素をとっていいならparentNode.querySelectorでいけそうです

javascript
1document.addEventListener('click',function(e){
2  var t=e.target;
3  if(t.classList.contains("click")){
4    console.log(t.parentNode.querySelector('li').innerHTML);
5  }
6});

HTML
1<ul>
2<li>foo</li>
3<li class="click">click</li>
4</ul>
5<ul>
6<li>bar</li>
7<li class="click">click</li>
8</ul>
9<ul>
10<li>baz</li>
11<li class="click">click</li>
12</ul>
13

投稿2017/11/08 03:50

yambejp

総合スコア114843

tyn

2017/11/08 14:51

回答ありがとうございます。簡潔かつ私の意図していた回答をいただいたのでベストアンサーに選ばせていただきたいと思います

行動規範の内容に同意します

こんなやり方も。

var arr = document.getElementsByClassName("click");
for(var i = 0; i < arr.length; i++){
  var val = arr[i];
  val.onclick=function(e){
    var elm = e.target;
    alert(elm.parentNode.getElementsByTagName(elm.nodeName)[0].innerHTML);
  };
};

※このスクリプト含むscriptタグはbodyタグを閉じる間際ぐらいに書く方が良いです。
headタグ内に書かない理由は、headタグ読み込み時点でまだ読み込み終わっていないbodyタグ内の要素を参照するスクリプトであるため、スクリプト実行時にエラーとなるからです。

投稿2017/11/08 04:03

編集2017/11/08 04:28

tkturbo

総合スコア5572

yambejp

2017/11/08 04:10

せっかく古い書き方するならletは使わずvarでよいのでは？またwindwo.onload時に実行しないとオブジェクトがつかめないのでそのままかくならbodyのなるべく下の方である旨注記したほうがよいでしょう

tkturbo

2017/11/08 04:25

> varでよい ↑確かに。 > bodyのなるべく下の方である旨注記 ↑追記しておきます。

tkturbo

2017/11/08 04:33

ほんとはpreviousSiblingを使いたかったのだが、直前の空白部（TextNode）が取れてしまうので。。。

yambejp

2017/11/08 04:35

previousElementSiblingが有効ならliの兄弟はかならずliなのでつかめますねそうでない場合はwhileでまわすとよいでしょう

tyn

2017/11/08 14:52

回答ありがとうございます。注意書きまで細かくしていただき大変勉強になります

行動規範の内容に同意します

jQueryを使えば一瞬なのですが、、、

jQuery
1$(function(){
2  var btn = $('.click');
3  btn.click(function(){
4    var t = $(this).prev('li').text();
5    alert(t);
6  });
7});

投稿2017/11/08 03:53

kenny_sayama

総合スコア1036

tyn

2017/11/08 14:47

回答ありがとうございます。jQueryとっても便利ですね…

行動規範の内容に同意します

ElementSibling系が使えるなら、ノードだけ取得もできますが使えない環境なら
TextもとれてしまうSibling系使うしかないかと。

javascript
1
2<script>
3   var clickTargets =  document.querySelectorAll(".click");
4   if(clickTargets)
5        for(var i =0 , len = clickTargets.length ; i<len ;i++){
6            var clickTarget = clickTargets[i];
7            clickTarget.addEventListener("click" , siblingTextConsole )
8        }
9
10   function siblingTextConsole(){
11       // 次の要素
12       var next = this.nextSibling;
13       // 次以降の要素
14       while(next){
15           console.log(next.textContent);
16           next = next.nextSibling;
17       }
18
19       next = this.nextElementSibling;
20       while(next){
21           console.log(next.textContent);
22           next = next.nextElementSibling;
23       }
24
25       // 前の要素
26       var prev = this.previousSibling;
27       // 前以降の要素
28       while(prev){
29           console.log(prev.textContent);
30           prev = prev.previousSibling;
31       }
32       prev = this.previousElementSibling;
33       while(prev){
34           console.log(prev.textContent);
35           prev = prev.previousElementSibling;
36       }
37   }
38</script>