jquery 親要素以外の取得

解決済

質問者：eeiina
質問日時：2012/09/14 13:51
回答数：3件

下記のような形で200をクリックしたら<li>に200を持つ<ul>以外の<ul>の色変えをしたいと思っています。

<button id="100">100</button> <button id="200">200</button> <button id="300">300</button>
<div>
<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>

このようなhtmlで200のボタンを押したとき<li>中身が200の<ul>はそのまま、他の<ul>を色変えする形です。

$('button#200').click(function(){

$('ul li').each(function(){
var siz = $(this).text();
if(siz == '200'){
$(this).parent().css('background','#ccc');
}
})
});
200を押したとき<li>200を含む<ul>を色変えはできましたが、それ以外を変える場合がわかりません。
どうかご教授お願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： fujillin
回答日時：2012/09/18 21:46

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">

</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>

- 0
- 件

通報する

この回答へのお礼

ありがとうございます！
まさにやりたい動作でした。

まったく想像していないやり方で、コードも短く大変勉強になりました。
それぞれの役割を勉強して理解したいと思います。

説明不足のなか、本当にありがとうございました。

通報する

お礼日時：2012/09/19 01:04

No.2

回答者： fujillin
回答日時：2012/09/17 06:07

No.1です。

最初のご質問と補足のコードではやっている内容が少し違いませんか？
最初のコードは、値が200だったら背景色を変える（そうでない時は何もしない）です。
それなので、No.1の回答もそのようになっています。

補足のコードのように、LIの値に応じてULの色を変えていると、途中での値がなんであろうと、結局は、最後のLIの値によって色が決まることになりませんか？

何をやりたいのかはよくわかりませんが、補足のようなコードにしたければ、UL単位で子要素のLIの値を一括で評価して背景色を決めるようにしなければならないのではないでしょうか。

- 0
- 件

通報する

この回答へのお礼

説明がわかりずらく、申し訳ありませんでした。
おっしゃる通り最初のコードは200だったら色を変えるものです。（やりたいこととは真逆ですがここまではできたという説明でした）

<li>の中に200を持たない<ul>の色を変えるということが目的です。

>補足のコードのように、LIの値に応じてULの色を変えていると、途中での値がなんであろうと、
>結局は、最後のLIの値によって色が決まることになりませんか？
その通りです。こうなってしまうので解決法がわからず再度補足させていただきました。

ご回答をヒントにもう少しがんばってみます、
ありがとうございました。

通報する

お礼日時：2012/09/18 00:35

No.1

回答者： fujillin
回答日時：2012/09/14 18:55

設定されている値がとり得る可能性によって考えが変わるかと思いますが…

◇方法１
自分以外に値が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>まで色が変わってしまうようです。

条件の仕方などやり方が違うのでしょうか・・
いろいろ試してみたのですがうまくいきませんでした。
この場合どう変えたらよいのか、申し訳ありませんがお願いいたします。