如何嵌套 <li> 标签值

Question

I need to get the value "B" . But coming with value "A" . I do not to get the value of "A". How to distinguish?

My HTML structure:

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

Answer 1

If you want to get the value of a particular <li> element when there are more than one in the document, you can distinguish between the element by using unique id s or class es.

Option 1: IDs

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

To get the value you would then:

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

Option 2: Classes

<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

List items can't have non-numeric values. For your HTML to be considered valid, you'll need to change your values to numbers. If you do this, you can then easily use javascript to get your values. A HTML structure with valid values may look something like so:

<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>

You can use document.querySelector and pass in the selector li[value="1"] > ul > li (this will select all li tags which are a child of a ul tag which is a child of a li tag with the value of 1 ). You can use this generically for a parent list item of value x like so:

li[value="x"] > ul > li

See example below:

 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>