2016-10-03 3 views
0

は、次のHTMLを考えますしかし、トップレベルul.menu?ここdocument.querySelector直系の子孫の問題

フィドルは:https://jsfiddle.net/dczat6g7/

これは私が.expected ULのいずれかが見つからないか、またはヌルすることが期待される、無効な結果のようです。何か不足していますか? querySelectorためのMDNドキュメントから

+2

の質問内のあなたの関連するコードでした。 JSフィドルのコードは*ボーナス*であり、非常に有益ですが、* * [mcve] *コードがあなたの質問に含まれていなければなりません(関連するコードを含まない質問については、 –

答えて

2

は、セレクタの指定されたグループと一致することが呼び出される要素の子孫である最初の要素を返します。

これはセレクタが指定されたnotで始まるとは限らず、セレクタの結果が指定されたノードの子孫にフィルタされているだけであるとは限りません。

e。グローバルにセレクタによってマッチしたノードのセットにある最初のノードを返します。これは子孫のactiveItemです。

.actualが適用された1つのノードが両方の基準を満たしています。

他のノードを基準にして動作する汎用のCSSセレクタ方式はありません。非IEの場合、:scopeをCSSに含めて、指定された要素に対して相対的に動作させることができます。普遍的な解決策は、idセレクタを使うことです。だから、あなたの開始ノードにidを追加するか(または既存のidを使用する)、そのidをCSSセレクタに含めることができます。

+0

これは私が何を言おうとしたかですが、より良いことです。 –

+1

"私が知る限り、別のノードに関連して動作するCSSセレクタメソッドはありません。"そのセレクタは:scopeSelector( ':scope> ul> li> ul')のようにスコープです。 – BoltClock

+0

@BoltClock:1つは毎日いくつかのことを学びます... – Richard

0

なぜ

var activeItem = document.querySelector('.active'); 
var nestedMenu = activeItem.querySelector('ul > li > ul > li > ul'); 

nestedMenu.classList.add('actual'); 

Working JSFiddle

ことだダウンこれは、[

別のレベル、あなたがそれを打破するのであれば、それは第3レベルである

[UL>李]第一レベルですul> li]第2レベル

[ul]第3リーヴのスタートあなたが持っていた何リットル

は助けるためにインターネットのまわりのリンクをたどるために私たちを期待していない、セカンドレベル