根據ul選擇li元素

Question

如何選擇第二個ul li元素，我具有以下結構： HTML

<ul>
       <li></li>
       <ul>
           <li>I want to select this</li>
      </ul>
</ul>

Answer 1

首先，您的HTML無效。 您不能將ul作為另一個ul的孩子。 它必須在li 。 ul內的文本也必須在li 。

<ul>
    <li>
        <ul>
            <li>I want to select this</li>
        </ul>
    </li>
</ul>

要在jQuery中選擇此選項，您可以使用：

$('ul > li > ul > li:first');

您還可以使用不太嚴格的命令： ul ul li:first ，具體取決於您需要嚴格遵守所定義的HTML結構。

Answer 2

如果您提供的結構不合適，則子<ul>標記應放在<li>標記內。 那么結構會像

<ul class="ul">
    <li></li>
    <li>
        <ul>
            <li>I want to select this </li>
        </ul>
    </li>
</ul>

那么您可以使用jquery將那個孩子<ul>用作

$(".ul li ul");

希望這可以幫助。

Answer 3

首先，您必須為您的父母ul添加一個類或ID：

<ul class="root">
    <li></li>
    <ul>
        I want to select this <li></li>
    </ul>
</ul>

然后，您可以選擇第二個，因為它總是第二個（索引1）：

$(".root").find("li").eq(1)

或者您將一個類添加到您的<li> ：

<ul class="root">
    <li></li>
    <ul>
        I want to select this <li class="myLi"></li>
    </ul>
</ul>

接着

$(".root").find(".myLi")

Answer 4

嘗試使用多個選項的此代碼段。

 console.log($('ul > ul > li:eq(0)').text()); //OR console.log($('ul').find('ul > li:eq(0)').text()); //OR console.log($('ul').children('ul').find('li:eq(0)').text()); //OR console.log($('ul > ul').find('li:eq(0)').text()); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul><b>First ul</b> <li>First li</li> <ul> <b>Second ul</b> <li>First li in second ul</li> </ul> </ul> 

Answer 5

您可以使用querySelector做到這一點。 檢查以下示例。

 var li = document.querySelector('ul ul li'); console.log(li.innerHTML); 

 <ul> <li>Not this</li> <ul> <li>I want to select this</li> </ul> </ul>