これ何て呼びますか

JQUERYのセレクタについて

解決済

  • 質問者：KOKOKO-KE
  • 質問日時：
  • 回答数：5件

JQUERYのセレクタの指定について教えてください。
ネストのulを作っているのですが，
<ul class="*">
<li>A
<ul class="+_sub">
<li>a</li>
<li>b</li>
</ul>
</li>
.
.
.
</ul>

入れ子のliのaまたはbを指定して(this)にしてから，上のliのAを指定するセレクタを
作りたいのですがどうすればいいのでしょうか。

用途としては，カーソルを置くと出てくる子リストを持つナビで，カレント位置の色を変えたく，
その時に，子リストと親リスト（aとA)の色を変えたいので，子リストから親リストを選択したい
のです。
子リストの数はまちまちで，規則性はありません。

子リストのすぐ前の親リスト，，，と指定出来ればいいのですが，いかんせん初心者で解りません。
宜しくお願いいたします。

質問者からの補足コメント

  • fujillin さん，ありがとうございます。
    早速試してみたんですが，どちらも<ul class="+_sub">までしか上がれません。
    parentのparentなんで上の<ul class="*">に行けると思うのですが，，，。
    li aの親で<ul class="+_sub">，その親で<ul class="*">ですよね。
    なんでだろう，，。

      補足日時：2015/06/24 11:31
    通報する

  • fujillin さん，本当にありがとうございます。
    再度確認しました。
    申し訳ありません。<a>要素が④に入っていました。
    <ul class="*"> ①
    <li>A 　　　 ②
    <ul class="*_sub"> ③
    <li><a herf>a</a></li> ④
    <li><a herf>b</a></li>
    </ul>
    </li>
    </ul>

    そこで，.parent().parent().parent()で②に上がることが出来たのですが，
    A　a　b
    と対象になってしまいます。
    .parent().parent().parent('li:first')　.parent().parent().parent().first()でも同じで，<li>要素に入っている文字なので当たり前なのでしょうか。
    Aだけが選択出来ないのでしょうか。何度も申し訳ありません。

      補足日時：2015/06/24 22:16
    通報する

  • 何度も申し訳ありません。ありがとうございます。
    下記のようにテストで動かしていますが，上手くいきません。

    <script type="text/javascript">
    $(function(){
    $('ul.nav_sub li a ').mouseover(function(){
    var ss=$(this).parent.parent.parent
    　　　　　$(ss).css('background-color','#0F6')}) });
    </script>
    <title>test</title>
    </head>
    <body>
    <ul class="nav">　
    　<li>A　
    　　<ul class="nav_sub">　
    　　　<li><a>a</a></li>　　　
    　　　<li><a>b</a></li>
    　　</ul>
    　</li>
    </ul>
    </body>

      補足日時：2015/06/25 15:25
    通報する

  • 本日，テストを重ねて無事，思い通りのナビが出来ました。
    一人では到底完成しなかった物が出来，感謝しております。

    一つ一つ解読？しておりますと，理解出来ない点がありまして，もしお時間がありましたら，
    教えて頂けませんか？
    var ss=$(this).parents('li').children('a')
    のthisがa-1だとすると，その場合変数ssの戻り値は.parents('li').children('a')のAとaだと思っていたのですが，thisのa-1も含まれているのが解りません。
    parentsに含まれているchildren('a')要素と言うことで含まれるのでしょうか。
    親子要素でなければ，.prev や　.nextなどではthisから見た要素を取り出すイメージなのですが，，。

    色々と質問ばかりで申し訳ありません。

      補足日時：2015/06/27 02:55
    通報する
通報する

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

質問の本文を隠す

A 回答 (5件)

No.4ベストアンサー

  • 回答者： fujillin
  • 回答日時：

ANo3です。



＞下記のようにテストで動かしていますが，上手くいきません。
parentでエラーになっているはずですね。parent()として使ってください。
以下のようにすれば一応は動作しますが、意図なさっているものとは違うのではないかと想像します。
　$(function(){
　$('ul.nav_sub li a').mouseover(function(){
　var ss = $(this).parent().parent().parent();
　　　ss.css('background-color','#0F6');
　});
　});

background-colorを用いるとその要素の背景範囲が全て塗られますが、前回の補足ではそれは違うようなニュアンスだったと思いますが…？
また、このままですと、背景色が付け加えられるのみなのでマウスを移動しても元には戻らず、色のつく範囲が広がるだけになります。（ご提示のHTMLではnav直下のli要素がひとつしかないので、その様子は見られませんが・・・）


なんとなくの想像ですが、こんなことをなさりたいのでしょうか？
※ HTML構造を少し変えています。こうすることで各階層が同じ構造になるので、階層数が増えてもそのままで適用可能になります。（以下の例では3階層にしています）
※ 最上位のnavだけ特定できればよさそうなので、とりあえず他は省いています。必要に応じて付け加えてください。
※ 通常時の背景色をtransparentと勝手に仮定しています。
※ A要素の範囲を広げた方が見た目に分り易いので、100pxとし、さらにボーダーを仮指定しています。
※ 実行時の効率を上げるなら、毎回 $("ul.nav a") を計算せずに、最初に計算して変数化しておくとか…
※ A要素の本来の動作（リンク）を使用しない場合は、スクリプトでキャンセルするのをお忘れなく。
※ なさりたいことや実際のレイアウト等がよく分かっていないので、あくまでも制御方法の一例としての参考です。

（全角空白は半角に）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>Sample</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<style type="text/css">
ul.nav a{
display: inline-block;
width: 100px;
border: 1px solid gray;
padding: 3px 10px;
}
</style>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery","1");</script>

<script type="text/javascript">
$(function(){
$("ul.nav a").hover(function(){
$(this).parents("li").children("a").css("background-color", "#0F6");
}, function(){
$("ul.nav a").css("background-color", "transparent");
});
});
</script>
</head>

<body>

<ul class="nav">
<li><a href="#">A</a>
<ul>

<li><a href="#">a</a>
<ul>
<li><a href="#">a-1</a></li>
<li><a href="#">a-2</a></li>
<li><a href="#">a-3</a></li>
</ul>
</li>

<li><a href="#">b</a>
<ul>
<li><a href="#">b-1</a></li>
<li><a href="#">b-2</a></li>
<li><a href="#">b-3</a></li>
</ul>
</li>

</ul>
</li>
</ul>

</body>
</html>
    • good
    • 1
    • 件
通報する
この回答へのお礼

ありがとうございます！その通りです！
今，プリントアウトしてやっと理解できました。
お陰様で意図とする事が出来そうです。
このような初心者のしつこい質問にお付き合い頂きまして本当にありがとうございました。
加えて，注意点まで教えて頂いて助かりました。

初心者でオロオロするばかりなのですが，今後も勉強を続けていこうと思います。
ありがとうございました。

通報する
お礼日時：2015/06/25 20:25

No.5

  • 回答者： fujillin
  • 回答日時：

＞本日，テストを重ねて無事，思い通りのナビが出来ました。


ひとまず良かったですね。


＞その場合変数ssの戻り値は.parents('li').children('a')のAとaだと思っていたのですが，thisのa-1も含まれているのが解りません。

サンプルのHTMLを対象に考てみます。階層別に番号を振って見ると、
<ul class="nav">　　　　　　　…①
　<li>　　　　　　　　　　　　…②
　　<a href="#">A</a>　　　　 …③-1
　　<ul>　　　　　　　　　　　…③-2
　　　<li>　　　　　　　　　　…④
　　　　<a href="#">a</a>　　 …⑤-1
　　　　<ul>　　　　　　　　　…⑤-2
　　　　　<li>　　　　　　　　…⑥
　　　　　　<a href="#">a-1</a>　…⑦
　　　　　</li>
　　　　　<li><a href="#">a-2</a></li>
　　　　　<li><a href="#">a-3</a></li>
　　　　</ul>
　　　</li>
　　</ul>
　</li>
</ul>
のような感じになるかと思います。

$("ul.nav a").hoverでイベントを設定していますので、イベント発生の対象となり得るのは③-1、⑤-1、⑦・・・です。
仮にイベントが⑦（=this）で発生したとすると、$(this).parents("li")は⑦の祖先要素全体のうちからLI要素を返しますので、⑥、④、②が戻り値となります。
.children("a")でそれぞれの子要素のうちＡ要素を取得するので、⑥→⑦、④→⑤-1、②→③-1となり、結局、⑦、⑤-1、③-1が取得できる仕組みになっています。

前回の説明にも書きましたように、HTMLの構造を全体に同じ構成にすることで、単一の選択方法で、目的とする要素を取得できるようにしています。
また、このような構成にすることで、階層が何階層になっても同じ処理で対応することが可能になりました。
    • good
    • 0
    • 件
通報する
この回答へのお礼

fujillinさん。とても丁寧な説明をありがとうございました。
とても解りやすく説明して下さったので，初心者の私にも理解出来ました。

>$(this).parents("li")は⑦の祖先要素全体のうちから
ここの理解が出来ていなかったようです。
納得が出来ました。

そして，この方法だと，後々の修正にも対応できるので便利ですね。
項目や階層の変更もhtmlの項目変更だけで良いので嬉しいです。
と，この時点でやっと理解が出来ています。

何より，しつこい質問に何度も丁寧に答えてくださったことに，本当に感謝します。
お陰様で理解出来たと共に，より興味が湧いてきました。
まだまだ初心者ですが，引き続き勉強を続けていく事にします。
本当にありがとうございました。

通報する
お礼日時：2015/06/30 02:02

No.3

  • 回答者： fujillin
  • 回答日時：

ANo2です。



HTML構造がはっきりしているのなら、parent()を連書するよりはparents("li")またはparents("li:first")の方がスマートな気はしますが、まぁ、それはどちらでも同じなので・・・

＞A　a　b　と対象になってしまいます。
取得要素（jQueryオブジェクト）のlengthを確認してみてください。
「1」になっているはずと思いますので、対象となっているのは単独のli要素のみのはずです。
多分、その後の処理（または初期設定）に問題があるのではないでしょうか？

ご質問が
＞liのAを指定するセレクタを
＞作りたいのですがどうすればいいのでしょうか。
という内容でしたので、セレクタに関して回答したのでしたが・・・


＞カレント位置の色を変えたく，～～
…って、もしかして対象要素（LI）を直接CSSでcolor指定していませんか？
colorは原則として継承されるので、影響は子要素にも及びます。
(子要素に別の指定がしてあれば、影響はでません）
その結果として、ご希望のようにならないのではないでしょうか。
（実際に、どのような処理をなさっているのかわからないので、あくまでも推測ですが）


もし、上記の推測内容が原因であるならば、個別に設定してあげるか、デフォルトで通常の色になるように指定しておいて、変えたい要素だけに「active」などのクラスを設定することで、表示が変わるようにしておくといった方法がよろしいのではないでしょうか？
あるいは、HTML構造を変えても良いなら、<li><a ～>A</a></li>とか<li><span ～>A</span></li>などにして、子要素のcolorを指定するようにするなどといった方法もあるかも。
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： fujillin
  • 回答日時：

ANo1です。



＞どちらも<ul class="+_sub">までしか上がれません
おかしいですね。
HTMLの構造がご提示の内容と違っていることはありませんか？
閉じタグが抜けているとか、閉じタグのつもりで開始タグが入ってしまっているとか。


構造を単純化すると以下になると思いますが、
<ul class="*">　　　・・・・・①
　<li>A　　　・・・・・・・・②
　　<ul class="+_sub">　・・・③
　　　<li>a</li>　　　・・・・④（this)
　　　<li>b</li>
　　</ul>
　</li>
</ul>


◆$(this).parent().parent()
＞i aの親で<ul class="+_sub">，その親で<ul class="*">ですよね。
そうはなりません。
④から見て、$(this).parent()が③に当たり、さらにその親要素なので②になるはずです。


◆$(this).parents("li:first")
＞<ul class="+_sub">までしか上がれません
こちらはセレクタでli要素を指定しているので、ul要素が返されることはないはずです。（li要素または空オブジェクトしか返ってこないはず）
「：first」で修飾しているので（存在すれば）②に相当する（length=1の)要素集合が返されるはずなんですが・・・？
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： fujillin
  • 回答日時：

parent().parent()


とか、
　parents("li:first")

とかではいかがでしょうか？
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報