- ベストアンサー
jqueryで親要素以外の取得方法
- jqueryのセレクタを使用して、特定の要素を取得する方法について説明します。
- 例えば、特定の値を持つ子要素を持つ親要素以外の要素を取得する場合、以下のような方法があります。
- 具体的には、指定した値を持つ子要素を持つ親要素以外の要素を特定し、その要素に対して操作を行うことができます。
- eeiina
- お礼率50% (27/54)
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
No.2です。 よくわかってませんが、「200」の他にも100、300のボタンがあるみたいなので、そちらでも同じことをなさりたいのかと勝手に想像して、 イメージのみのサンプルを。（なさりたいことと合致しているかはわかりませんが、こんな方法もあるよというサンプル） （全角空白は半角に） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script> <script type="text/javascript"> <!-- $(function(){ $("#buttons>button").click(function(){ var val = $(this).text(); $("#lists>ul").each(function(){ var f = false; $(">li" ,this).each(function(){ f = f || $(this).text()==val; }); $(this).css("backgroundColor", f?"":"#ccc"); }); }); }); //--> </script> </head> <body> <div id="buttons"> <button>100</button> <button>200</button> <button>300</button> </div> <div id="lists"> <ul><li>100</li><li>150</li></ul> <ul><li>200</li><li>250</li></ul> <ul><li>300</li><li>350</li></ul> </div> </body> </html>
その他の回答 (2)
- fujillin
- ベストアンサー率61% (1594/2576)
No.1です。 最初のご質問と補足のコードではやっている内容が少し違いませんか？ 最初のコードは、値が200だったら背景色を変える（そうでない時は何もしない）です。 それなので、No.1の回答もそのようになっています。 補足のコードのように、LIの値に応じてULの色を変えていると、途中での値がなんであろうと、結局は、最後のLIの値によって色が決まることになりませんか？ 何をやりたいのかはよくわかりませんが、補足のようなコードにしたければ、UL単位で子要素のLIの値を一括で評価して背景色を決めるようにしなければならないのではないでしょうか。
お礼
説明がわかりずらく、申し訳ありませんでした。 おっしゃる通り最初のコードは200だったら色を変えるものです。（やりたいこととは真逆ですがここまではできたという説明でした） <li>の中に200を持たない<ul>の色を変えるということが目的です。 >補足のコードのように、LIの値に応じてULの色を変えていると、途中での値がなんであろうと、 >結局は、最後のLIの値によって色が決まることになりませんか？ その通りです。こうなってしまうので解決法がわからず再度補足させていただきました。 ご回答をヒントにもう少しがんばってみます、 ありがとうございました。
- fujillin
- ベストアンサー率61% (1594/2576)
設定されている値がとり得る可能性によって考えが変わるかと思いますが… ◇方法１ 自分以外に値が200のものがないとあらかじめわかっているなら、親要素（ＵＬ）の兄弟要素の背景を設定すればよいと思われます。 $(this).parent().siblings("ul") で、他の兄弟要素（ＵＬ要素）を取得できるはずです。 ◇方法２ 自分以外にも値200のものが存在する、あるいは値が動的に変わるような場合は、ご質問文にある通りにそれぞれのulの子要素liを調べて値200のものがあれば何もしない、なければ背景色をセットする。 具体的には、上記で取得した各ＵＬ要素についてループ（あるいはeach）で、子要素ＬＩに値200のものがなければ背景色を設定する。 みたいな方法ではいかがでしょうか。
補足
ご回答ありがとうございます。 値はランダムにあるので方法2になります。 以下のようにしてみたのですが、 $('ul li').each(function(){ if($(this).text(); == '200'){ $(this).parent().siblings("ul").children().each(function(){ if($(this).text()=="200"){ $(this).parent().css('background','#fff'); }else{ $(this).parent().css('background','#ccc'); } }) } }) 200がない<UL>の背景色を変えるところで、すべて色が変わってしまいます。 <ul> <li>200</li><li>250</li> </ul> 200がある<UL>の所でも、250など違う値が入っているのでそれを拾って、この<UL>まで色が変わってしまうようです。 条件の仕方などやり方が違うのでしょうか・・ いろいろ試してみたのですがうまくいきませんでした。 この場合どう変えたらよいのか、申し訳ありませんがお願いいたします。
お礼
ありがとうございます！ まさにやりたい動作でした。 まったく想像していないやり方で、コードも短く大変勉強になりました。 それぞれの役割を勉強して理解したいと思います。 説明不足のなか、本当にありがとうございました。