时间戳

首页 > 解决方案 > 我得到以下Html，只使用Html Dom，我怎样才能得到ul的壁橱里

html - 我得到以下Html，只使用Html Dom，我怎样才能得到ul的壁橱里

问题描述

我得到以下 Html，只使用 Html Dom，我怎样才能得到 ul (class=2) 的壁橱 li？（不包括 class = 3 下的所有 li）：

<ul class="2">
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li class="haschild"><a>text</a>
  <ul class="3">
    <li>text</li>
    <li>text</li>
  </ul>
  </li>
  <li class="haschild"><a>text</a>
  <ul class="3">
    <li>text</li>
    <li>text</li>
  </ul>
  </li>
  <li class="haschild"><a>text</a>
  <ul class="3">
    <li class="haschild"><a>text</a>
      <ul class="4">
        <li>text</li>
        <li>text</li>
      </ul>
    </li>
    <li class="haschild"><a>text</a>
     <ul class="4">
       <li>text</li>
       <li>text</li>
     </ul>
    </li>
  </ul>
  </li>

标签： html

解决方案

似乎至少 chrome（我只尝试过 google-chrome）不喜欢名为 number 的类2，所以我将它们重命名为two等等。所以鉴于 Html ：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
<ul class="two">
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li class="haschild"><a>text</a>
    <ul class="three">
      <li>text</li>
      <li>text</li>
    </ul>
    </li>
    <li class="haschild"><a>text</a>
    <ul class="three">
      <li>text</li>
      <li>text</li>
    </ul>
    </li>
    <li class="haschild"><a>text</a>
    <ul class="three">
      <li class="haschild"><a>text</a>
        <ul class="four">
          <li>text</li>
          <li>text</li>
        </ul>
      </li>
      <li class="haschild"><a>text</a>
       <ul class="four">
         <li>text</li>
         <li>text</li>
       </ul>
      </li>
    </ul>
    </li>
 </body>
 </html>

并使用选择器：document.querySelector('ul.two > li:nth-child(1)') 我明白了：<li>text</li>

CSS 选择器

更新：如果类必须是一个数字（我们无法控制）那么至少对我来说隐式选择器不起作用所以我们退回到命令式风格（这里可能有很多错误:)）

所以现在class="2"可以选择了。警告：尽管 dom 已更改，但某些动态更新 Html 的页面可能具有不同的（旧/初始）属性。我在这里不确定——只有实验才能证明。

for(var elem of ul) {
    if (elem.getAttribute('class') == '2') {
        var all_lis = elem.querySelectorAll('li');
        for(var li_elem of all_lis) {
            var next_first_ul = li_elem.querySelector('ul');
            if(next_first_ul !== null) {
                break;
            }
            console.log(li_elem);
            
        }
        break;
    }
}

在此处输入图像描述 在这里你应该得到li's 直到li带有 aul如果你还需要包括那个 li 然后在 if 之前移动 console.log

推荐阅读