親子関係のセレクタ指定方法

下記のケースで#hogeから見た場合の.piyoをすべて指定したいのですが
動作致しません。

$('#hoge>.fuga>.bar').children('div').removeClass('piyo');

セレクタの指定上、どの点の問題があるかご助言を頂戴したく存じます。
よろしくお願い申し上げます。

Javascript
1<div id="hoge">
2   <div class="fuga">
3       <div class="foo"></div>
4       <div class="bar">
5           <div class="piyo"></div>
6           <div class="piyo"></div>
7      </div> 
8   </div>
9</div>

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

回答3件

ベストアンサー

セレクタの指定上、どの点の問題があるかご助言を頂戴したく存じます。

いいえ, セレクタの指定に問題はありません. スクリプトがDOMの初期化以前に実行されていることが原因です.

おそらくあなたのコードは次のようになっているはずです.

HTML
1<html>
2  <head>
3    <script src="jquery.js"></script>
4    <script>
5$('#hoge>.fuga>.bar').children('div').removeClass('piyo'); 
6    </script>
7  </head>
8  <body>
9<div id="hoge">
10   <div class="fuga">
11       <div class="foo"></div>
12       <div class="bar">
13           <div class="piyo"></div>
14           <div class="piyo"></div>
15      </div> 
16   </div>
17</div>
18  </body>
19</html>

WEBブラウザはHTMLコードを(原則)上から読み込み, script要素が現れたタイミングでその内容を即座に実行します. 従って, 処理対象のノードよりも上にscript要素が存在していると, DOMツリーから処理対象を見つけることが出来ません.

この問題を解決するには次の何れかを行います.

処理対象のノードよりも後方にscript要素を配置する.
documentオブジェクトが発するDOMContentLoadedイベントを待ってから処理を開始する.

jQueryではreadyメソッドとしてラップされています.

例えば後者を採用するのであれば, 次のようになるでしょう.

HTML
1<html>
2  <head>
3    <script src="jquery.js"></script>
4    <script>
5$(function(){
6  $('#hoge>.fuga>.bar').children('div').removeClass('piyo');
7});
8    </script>
9  </head>
10  <body>
11<div id="hoge">
12   <div class="fuga">
13       <div class="foo"></div>
14       <div class="bar">
15           <div class="piyo"></div>
16           <div class="piyo"></div>
17      </div> 
18   </div>
19</div>
20  </body>
21</html>

NOTE:
これもJavaScriptの有名な落とし穴の一つです.

投稿2018/03/22 23:58

defghi1977

総合スコア4756

SugiuraY

2018/03/23 04:02

先日に引き続き、ご回答をいただきありがとうございます。トラップに見事に足をすくわれておりました。後者でお示しいただきました例示は $(function(){ が実際には $(document).ready(function({... と同義であるため、動作させることができるとの理解でよろしかったでしょうか？よろしくお願い申し上げます。

defghi1977

2018/03/23 04:05

はい, そのとおりです. (この部分, jQueryを忘れているので若干あやふやですが…)

SugiuraY

2018/03/24 06:13

了解です、お力添えをいただき、改めて深く御礼申し上げます。よろしくお願いいたします。

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

ほかに動かない要因はあるとすればidの重複くらいですかね。

質問とは違うのでアレなんですが
「#hogeから見た場合の.piyoをすべて」
と聞くと最初に子孫セレクタを使いたくなります。

javascript
1$('#hoge .piyo').removeClass('piyo');

これでいいのでは？と思ってしまいます。

投稿2018/03/23 00:22

sousuke

総合スコア3828

SugiuraY

2018/03/23 04:00

コメントありがとうございます。隔世でセレクタ指定ができるんですね。。目から鱗です。動作することも確認できました。大変勉強になります。基本的なセレクタの指定方法はテキストで学んだのですが、このようなやり方はやはり経験しながら身につけていくということかと感じていますが、何れにしても大変勉強になりました。よろしくお願い申し上げます。

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

単純にjQueryの宣言をしていないだけのような。
$(function(){
$('#hoge>.fuga>.bar').children('div').removeClass('piyo');
});

投稿2018/03/22 23:53