Question

我需要获取值"B"。但是带有价值"A"。我没有得到“ A”的值。如何区分？

我的HTML结构：

<li>
  <ul>
    <li value="A">
      <ul>
        <li onclick="cick(this)" value="B"></li>
      </ul>
    </li>
  </ul>
</li>

Answer 1

如果要在文档中有多个元素时获取特定<li>元素的值，则可以使用唯一的id或class来区分元素es。

选项1：ID

<li>
   <ul>
      <li id="number1" value="100">
         <ul>
             <li id="number2" onclick="click(this)" value="200"></li>
         </ul>
      </li>
   </ul>
</li>

要获取值，您将：

function(){
  var el = document.getElementById("number2")
  var value = el.value; // outputs 200
}

选项2：课程

<li>
   <ul>
      <li class="number1" value="150">
         <ul>
             <li class="number2" onclick="click(this)" value="300"></li>
         </ul>
      </li>
   </ul>
</li>

function(){
  var el = document.getElementsByClassName("number2")[0]
  var value = el.value; // outputs 300
}

Answer 2

列表项不能包含非数字值。为了使您的HTML有效，您需要将值更改为数字。如果执行此操作，则可以轻松使用javascript获取值。具有有效值的HTML结构可能如下所示：

<li>
   <ul>
      <li value="1"> <!-- Changed A to 1 -->
         <ul>
             <li onclick="cick(this)" value="2"></li> <!-- Changed B to 2 -->
         </ul>
      </li>
   </ul>
</li>

您可以使用document.querySelector并传递选择器li[value="1"] > ul > li（这将选择所有li标签，它们是ul标签的子元素，li标签是1的孩子x标签，其值为li[value="x"] > ul > li）。您可以将其一般用于值const val = document.querySelector('li[value="1"] > ul > li').value; console.log(val); // 2的父级列表项，如下所示：

<li>
  <ul>
    <li value="1">
      <ul>
        <li id="A" onclick="cick(this)" value="2"></li>
      </ul>
    </li>
  </ul>
</li>

请参见以下示例：

import ES        from './lib/ElasticsearchClient.mjs'
import Tent      from './lib/Tent.mjs'
import Email     from './lib/Email.mjs'
import SASTools  from './lib/SASClient.mjs'

admins

如何获取嵌套的<li>标签值

2 个答案: