質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

5回答

2955閲覧

jQueryのfor文について教えてください

退会済みユーザー

退会済みユーザー

総合スコア0

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2015/01/22 10:39

###はじめに

お世話になります。
初歩的な質問で大変恐縮ですが、jQueryのfor文について教えてください。

** 「質問の追記とお詫び」を追加しました。2015/01/22/21:25 **

###やりたいこと

li要素をhoverしたときにli要素内にある特定のp要素(p.item-titleのみ)の背景を変えたいと考えております。
ググりながら書いたら、下記の記述で実現できました。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script> $(function() { $('.item li:nth-child(1)').hover( function() { $('.item li:nth-child(1) .item-title').css("background-color","#e73535"); },function() { $('.item li:nth-child(1) .item-title').css("background-color","transparent"); }); $('.item li:nth-child(2)').hover( function() { $('.item li:nth-child(2) .item-title').css("background-color","#e73535"); },function() { $('.item li:nth-child(2) .item-title').css("background-color","transparent"); }); $('.item li:nth-child(3)').hover( function() { $('.item li:nth-child(3) .item-title').css("background-color","#e73535"); },function() { $('.item li:nth-child(3) .item-title').css("background-color","transparent"); }); }); </script> <div class="item"> <ul> <li> <p class="item-img">画像<p> <p class="item-title">ああああああ</p> </li> <li> <p class="item-img">画像<p> <p class="item-title">いいいいいい</p> </li> <li> <p class="item-img">画像<p> <p class="item-title">うううううう</p> </li> </ul> </div>

表示は意図した通りになりましたが、nth-childを何回も繰り返しているのでfor文でも実現できるのではと考え下記のコードに変更しました。

###for文を利用したコード

<script> $(function() { var count = $('.item li').length; for(var i=1; i < count; i++) { $('.item li:nth-child(' + i + ')').hover( function() { $('.item li:nth-child(' + i + ') .item-title').css("background-color","#e73535"); },function() { $('.item li:nth-child(' + i + ') .item-title').css("background-color","transparent"); }); } }); </script>

for文に変更したら意図した通りの表示になりません。
記述に問題がありますでしょうか?それともfor文では実現できないのでしょうか?
どこに問題があるか教えて頂けると幸いです。
よろしくお願いいたします。

###質問の追記とお詫び

私の質問内容が分かり難いため、イメージ図を追記いたします。
折角ご回答頂いたのに申し訳ございません。
ご回答頂いた方々にお詫び申し上げます。
ご回答頂いた内容は参考にさせて頂きます。

やりたいことは下記のイメージ図になります。
分かりやすくするためにCSSを追加しております。
li要素をホーバーしたときにp.item-titleの背景色を変更できればと考えております。
ですのでp.item-imgをホバーしてもp.item-titleの背景色が変わるようになります。

![イメージ説明]WIDTH:600

イメージ図のコードは下記になります。
これをfor文または効率の良い書き方はあるのかなと思い、質問いたしました。

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> </head> <body> <style> body { font-family: Meiryo, メイリオ, sans-serif; } * { margin:0; padding:0; } .item li { width:200px; margin:0 20px 0 0; list-style:none; float:left; text-align:center; padding:5px; border:1px dotted #000; } .item-img { height:150px; line-height:150px; background:#c8f0ff; border:1px dotted #0065c3; } .item-title { padding-top:10px; padding-bottom:10px; } </style> <div class="item"> <ul> <li> <p class="item-img">画像<p> <p class="item-title">ああああああ</p> </li> <li> <p class="item-img">画像<p> <p class="item-title">いいいいいい</p> </li> <li> <p class="item-img">画像<p> <p class="item-title">うううううう</p> </li> </ul> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script> $(function() { $('.item li:nth-child(1)').hover( function() { $('.item li:nth-child(1) .item-title').css("background-color","#e73535"); },function() { $('.item li:nth-child(1) .item-title').css("background-color","transparent"); }); $('.item li:nth-child(2)').hover( function() { $('.item li:nth-child(2) .item-title').css("background-color","#e73535"); },function() { $('.item li:nth-child(2) .item-title').css("background-color","transparent"); }); $('.item li:nth-child(3)').hover( function() { $('.item li:nth-child(3) .item-title').css("background-color","#e73535"); },function() { $('.item li:nth-child(3) .item-title').css("background-color","transparent"); }); }); </script> </body> </html>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答5

0

こういうことでしょうか(jQuery 関係ないですが)

lang

1<!doctype html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 body { font-family: Meiryo, メイリオ, sans-serif; } 8 * { margin:0; padding:0; } 9 .item li { 10 width:200px; 11 margin:0 20px 0 0; 12 list-style:none; 13 float:left; 14 text-align:center; 15 padding:5px; 16 border:1px dotted #000; 17 } 18 .item-img { 19 height:150px; 20 line-height:150px; 21 background:#c8f0ff; 22 border:1px dotted #0065c3; 23 } 24 .item-title { 25 padding-top:10px; 26 padding-bottom:10px; 27 } 28 li:hover .item-title { 29 background:#f00; 30 } 31 </style> 32</head> 33<body> 34 <div class="item"> 35 <ul> 36 <li> 37 <p class="item-img">画像<p> 38 <p class="item-title">ああああああ</p> 39 </li> 40 <li> 41 <p class="item-img">画像<p> 42 <p class="item-title">いいいいいい</p> 43 </li> 44 <li> 45 <p class="item-img">画像<p> 46 <p class="item-title">うううううう</p> 47 </li> 48 </ul> 49 </div> 50</body> 51</html>

下記の部分を追加しています。

li:hover .item-title { background:#f00; }

投稿2015/01/22 13:43

ngyuki

総合スコア4514

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2015/01/22 14:40

えー!CSSだけでも実現できるですね(゚д゚;) 擬似クラスの後に記述して指定できるとは知りませんでした。 とても参考になりました。今後CSS書くときにも活躍しそうです。 ご回答ありがとうございました。
退会済みユーザー

退会済みユーザー

2015/01/23 04:43

改めて試してみましたが、この指定方法はかなり便利ですね^^ li:hover .item-title:after と指定すればホバー時に別のオブジェクトも表示することもできますし、擬似クラスのあとにまた擬似クラスを指定することでかなり表現の幅が広がりました。 改めてお礼申し上げます。
guest

0

ベストアンサー

改めてコメントします。
こんなかんじでイケますよー。

$(this).children('.item-title')

ようするに、jQueryのセレクタの指定の方法ってことと理解しました。
forは使わない方向性で。

lang

1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <title>test</title> 6</head> 7<body> 8 9<div> 10 <ul> 11 <li> 12 <p>画像<p> 13 <p class="item-title">ああああああ</p> 14 </li> 15 <li> 16 <p>画像<p> 17 <p class="item-title">いいいいいい</p> 18 </li> 19 <li> 20 <p>画像<p> 21 <p class="item-title">うううううう</p> 22 </li> 23 </ul> 24</div> 25 26<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 27<script> 28(function() { 29 30 $('li').hover( 31 function() { 32 $(this).children('.item-title').css({'background-color': '#e73535'}); 33 }, 34 function() { 35 $(this).children('.item-title').css({'background-color': 'transparent'}); 36 } 37 ); 38 39})(); 40</script> 41</body> 42</html> 43

投稿2015/01/22 12:39

Seiji_Ogawa

総合スコア112

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2015/01/22 14:22

おお!thisとchildrenを使用することで実現できるんですね。 for文も使わずにすっきりしたコードになってますね。すごいです^^ 私の質問が分かり難かったにもかかわらず、 何度もご回答ありがとうございました。勉強になりました。
guest

0

for使わないでいけますよ。
$(this)使えばOK。

あと、scriptタグは閉じbodyタグの直前に入れると良いかも。

lang

1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <title>test</title> 6</head> 7<body> 8 9<div> 10 <ul> 11 <li> 12 <p>画像<p> 13 <p class="item-title">ああああああ</p> 14 </li> 15 <li> 16 <p>画像<p> 17 <p class="item-title">いいいいいい</p> 18 </li> 19 <li> 20 <p>画像<p> 21 <p class="item-title">うううううう</p> 22 </li> 23 </ul> 24</div> 25 26<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 27<script> 28(function() { 29 30 $('.item-title').hover( 31 function() { 32 $(this).css({'background-color': '#e73535'}); 33 }, 34 function() { 35 $(this).css({'background-color': 'transparent'}); 36 } 37 ); 38 39})(); 40</script> 41</body> 42</html> 43

投稿2015/01/22 11:46

Seiji_Ogawa

総合スコア112

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sho_cs

2015/01/22 11:59

だいたい同じコードを書いてしまいました :)
退会済みユーザー

退会済みユーザー

2015/01/22 12:29

ご回答ありがとうございます。 ご教示頂いた方法を参考に試してみます。
Seiji_Ogawa

2015/01/22 12:37

@sho_cs あらほんとだwww
guest

0

求めていた回答とちょっと違うかもしれませんが、jQueryを使わずともできます。
CSSを用いて

lang

1p.item-title:hover{ 2 background-color : #e73535; 3}

でitem-titleクラスのついてpタグにホバーすると色が変わります。
JavaScriptのコードのほうはおそらくスコープが原因で意図しない動作になっていると思われますが、どうしてそうなるかはちょっと説明できません。すみません。

投稿2015/01/22 11:25

nasum

総合スコア64

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2015/01/22 11:40

ご回答ありがとうございます。 参考にさせていただきます。 可能であれば、li要素をホバーしたときにitem-titleの背景色を変えたいと考えております。 もしかしたら教えて頂いた方法を応用すれば、実現できるのかもしれませんが方法が思いつきません。 折角教えて頂いたのに力不足で申し訳ございません。
guest

0

forを使ってうまく行かなかった理由はfor文、fuction(){の直後でindexの値をコンソールに出力し、ブラウザのデバッガで確認してみるとわかってくると思います。

私なら以下のように書きます。

lang

1$(function() { 2 $('.item-title').hover( 3 function() {$(this).css("background-color","#e73535")}, 4 function() {$(this).css("background-color","transparent")} 5 ); 6});

投稿2015/01/22 11:55

sho_cs

総合スコア3541

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2015/01/22 12:28

ご回答ありがとうございます。 ご教示頂いた方法を試してみます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問