要素の順番を取得して、それに応じてスタイルを変更したい。

都道府県のリストに連動して同じ数の都道府県分のスタイルをマウスオンで変更したいです。
[japan_list]の北海道をホバーした時に[japan_div]の北海道の背景の色を変えたい。
都道府県の要素の順番はどちらも同じです。
一つ一つクラスを付与する方法でもできるのですが、47個もあるので、他の方法があればご教授いただきたいです。
index()やeq()でできそうなのですが、うまくいきません。。

<ul class="japan_list">
 <li>北海道</li>
 <li>岩手</li>
 <li>宮城</li>
 <li>青森</li>
 <li>福島</li>
 ･
 ･
 ･
 <li>沖縄</li>
</ul>

<div class="japan_div">
 <div>北海道</div>
 <div>岩手</div>
 <div>宮城</div>
 <div>青森</div>
 <div>福島</div>
 ･
 ･
 ･
 <div>沖縄</div>

<script>
$(function() {
var len = $('. japan_list li').length;

for (var i=0; i<len; i++) {

$('.japan_list li').eq(i).hover(function() {

$('.apan_div div').css('background', '#F6827B');

}, function() {

$('. japan_div div').css('background', '');

});

}

});
</script>
みたいな感じで試したのですが、後半の書き方がわからなかったです。

m.ts10806

2021/03/17 13:19 編集

PHPは本件とどう関係するのでしょうか。 >index()やeq()でできそうなのですが、うまくいきません。。何かしら試したことがあるのでしたら提示してください。でないと、あと少しなのか、見当違いなのか誰にも判断できません。「うまくいかない」の情報量はゼロなので。

soraoku

2021/03/17 13:31

m.ts10806

2021/03/17 13:46

質問は編集できます。タグも含めて調整してください。

hatena19

2021/03/17 15:14

jQueryコードは質問に追記してください。タグに jQuery も追加したほうがいいでしょう。

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

回答2件

ベストアンサー

index()やeq()を使うというのはあってますが、
jQueryなら、ループする必要はないです。

js
1$(function() {
2  let jpdiv = $('.japan_div div'); 
3  $('.japan_list li').hover(function() {
4    jpdiv.eq($(this).index()).css('background', '#F6827B');
5  }, function() {
6    jpdiv.eq($(this).index()).css('background', '');
7  });
8});

ネイティブのJavaScriptで書くなら、

js
1const jpli = document.querySelectorAll('.japan_list li');
2const jpdi = document.querySelectorAll('.japan_div div');
3
4jpli.forEach(function(el, i) {
5  el.addEventListener('mouseover', () => {
6    jpdi[i].style.backgroundColor = '#F6827B'
7  });
8  el.addEventListener('mouseleave', () => {
9    jpdi[i].style.backgroundColor = ''
10  });
11})

コメントの地方で分割した場合のコード例

html
1<div class="japan_list">
2  <ul class="tohoku">
3    <li>北海道</li>
4    <li>岩手</li>
5    <li>宮城</li>
6    <li>青森</li>
7    <li>福島</li>
8  </ul>
9  <ul class="kanto">
10    <li>東京</li>
11    <li>千葉</li>
12    <li>神奈川</li>
13  </ul>
14  <ul class="kyusyu">
15    <li>福岡</li>
16    <li>長崎</li>
17    <li>沖縄</li>
18  </ul>
19</div>
20
21<div class="japan_div">
22   <div class="tohoku">
23    <div>北海道</div>
24    <div>岩手</div>
25    <div>宮城</div>
26    <div>青森</div>
27    <div>福島</div>
28  </div>
29  <div class="kanto">
30    <div>東京</div>
31    <div>千葉</div>
32    <div>神奈川</div>
33  </div>
34  <div class="kyusyu">
35    <div>福岡</div>
36    <div>長崎</div>
37    <div>沖縄</div>
38  </div>
39</div>

jQueryの場合

js
1$(function() {
2  let jpli = $('.japan_list > ul > li');
3  let jpdiv = $('.japan_div > div > div'); 
4  jpli.hover(function() {
5    jpdiv.eq(jpli.index(this)).css('background', '#F6827B');
6  }, function() {
7    jpdiv.eq(jpli.index(this)).css('background', '');
8  });
9});

$(this).index() → 自身(this)が親要素の中で何番目か
要素リスト.index(this) → 自身(this)が要素リストの中で何番目か

ネイティブのJavaScript場合

js
1const jpli = document.querySelectorAll('.japan_list > ul > li');
2const jpdi = document.querySelectorAll('.japan_div > div > div');
3jpli.forEach(function(el, i) {
4  el.addEventListener('mouseover', () => {
5    jpdi[i].style.backgroundColor = '#F6827B'
6  });
7  el.addEventListener('mouseleave', () => {
8    jpdi[i].style.backgroundColor = ''
9  });
10})

投稿2021/03/17 15:35

編集2021/03/18 05:46

hatena19

総合スコア34377

soraoku

2021/03/18 01:29

できました！ありがとうございます。ちなみにですが、地方ごとに分けても同様にできるのでしょうか？現状のご教授いただいたものだと、地方が変わるとまた北海道に戻ってしまいます。（各地方の1番目が北海道になる） <ul class="japan_list"> <div class="tohoku"> <li>北海道</li> <li>岩手</li> <li>宮城</li> <li>青森</li> <li>福島</li> </div> <div class="kanto"> <li>東京</li> </div> ･･･ <li>沖縄</li> </div> </ul> <div class="japan_div"> <div>北海道</div> <div>岩手</div> <div>宮城</div> <div>青森</div> <div>福島</div> ･･･ <div>沖縄</div>

hatena19

2021/03/18 05:07

そもそもULの子要素をdivにするは文法違反違反です。 https://developer.mozilla.org/ja/docs/Web/HTML/Element/ul 許可されている内容 0個以上の <li>, <script>, <template> 要素。

hatena19

2021/03/18 05:47

地方分割した場合のコードを回答に追記しました。

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

html
1<!DOCTYPE html>
2<html>
3<meta charset="UTF-8" />
4
5
6<body>
7    <ul class="japan_list">
8        <li>北海道</li>
9        <li>岩手</li>
10        <li>宮城</li>
11        <li>青森</li>
12        <li>福島</li>
13        <li>沖縄</li>
14    </ul>
15
16    <div class="japan_div">
17        <div>北海道</div>
18        <div>岩手</div>
19        <div>宮城</div>
20        <div>青森</div>
21        <div>福島</div>
22        <div>沖縄</div>
23    </div>
24    <script>
25        var lis = document.getElementsByTagName('li');
26        var dis = document.querySelectorAll('div:not(.japan_div)');
27        console.log(lis);
28
29        function reset() {
30            for (let e = 0; e < dis.length; e++) dis[e].style.backgroundColor='white';
31        }
32        
33        for (let t = 0; t < lis.length; t++) {
34            lis[t].addEventListener('mouseover', () => {
35                reset();
36                dis[t].style.backgroundColor = 'blue'
37            });
38        }
39
40    </script>
41</body>
42
43</html>
44