javascript - 如何在嵌套代码中使用 Javascript 定位特定元素？

Question

我遇到了针对不同嵌套级别的问题。

我读到可以使用 .children 功能 + for 循环，但我没有这样做。

假设我想要一个传递嵌套级别的函数，它将更改 <li> 的某些属性仅在该级别上的元素。

I wrote this function to add classes to all last <li> 

  function changeElement(){ 
  var lastLi = document.querySelectorAll('li:last-child'); 
    for(i = 0; i < lastLi.length; i++){ 
     lastLi[i].classList.add('last'); 
     lastLi[i].style.background = 'green'; 
    } 
  } 

But now I need to target <li> elements on specific nested level

  function changeElementOnLevel(level) {
  var lastLi = document.querySelectorAll('li:last-child');

  for (i = 0; i < lastLi.length; i++) {
    //if level is 1 than we should change ul.root > li:last-child
    //if level is 3 than we should change ALL <li:last-child> inside ul.root 
> li > ul > 
  }

}
changeElementOnLevel(3)

<ul class='root'>
  <li>Cat
    <ul>
      <li>Eats1</li>
      <li>Sleeps</li>
      <li>Snuggles</li>
      <li>Plays</li>
      <li>Meows</li>
    </ul>
  </li>
  <li>Dog
    <ul>
      <li>Eats2</li>
      <li>Sleeps</li>
      <li>Snuggles</li>
      <li>Plays</li>
      <li>Barks</li>
    </ul>
  </li>
  <li>Fish
    <ul>
      <li>Eats3</li>
      <li>Sleeps</li>
      <li>Swims</li>
      <li>Plays</li>
      <li>Swims</li>
    </ul>
  </li>

Answer 1

我认为你有一些嵌套的 ul 标签，所以在你的例子中，ul.root 是 1 级，内部 ul 是 2 级，如果你有一个 ul 标签而不是“Eats1”，它将是 3 级和.. .
使用这个功能:

function changeElementOnLevel(level){
    let query = 'ul.root>li';
    for (let i = 1; i < level; i++) {
        query += '>ul>li'
    }
    query += ':last-child'
    var lastLi = document.querySelectorAll(query);
    for(i = 0; i < lastLi.length; i++){
        // your code 
    }
 }