<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul class="menu">
<li>
<a>A</a>
<ul>
<li>
<a>AA1</a>
<ul>
<li><a>AAA11</a></li>
<li><a>AAA12</a></li>
</ul>
</li>
<li>
<a>AA2</a>
<ul>
<li><a>AAA21</a></li>
<li><a>AAA22</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a>B</a>
<ul>
<li>
<a>BB1</a>
<ul>
<li><a>BBB11</a></li>
<li><a>BBB12</a></li>
</ul>
</li>
<li>
<a>BB2</a>
<ul>
<li><a>BBB21</a></li>
<li><a>BBB22</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
<script>
var ul=document.querySelector('.menu');
//假設這個選單有很多層級，每次遞回獲取ul下直接子后代li下的直接子ul作處理
//Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': '>li>ul' is not a valid selector
//var subUl=document.querySelectorAll('>li>ul');//接以'>'符號開頭則error
//var subUl=document.querySelectorAll('.menu>li>ul');//ok
handleUl(ul);
function handleUl(ul){
//怎么獲取ul下直接子元素li下的直接子元素ul集???
var subUls=ul.querySelectorAll('>li>ul');//error
subUls.forEach(function(item){
//item do sth
//
arguments.callee(item);
});
}
</script>
uj5u.com熱心網友回復：
頂一下，沒人回復么！！！！！！！！！uj5u.com熱心網友回復：
試試
var subUl=ul.querySelectorAll(':scope > li >ul');
需要注意的是，:scope 這個偽元素可能有兼容性問題
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/227796.html
標籤：JavaScript