wählen li Element basierend auf der ul

Question

, wie ich das zweite ul li Element auswählen kann, habe ich diese Struktur: HTML

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

Answer 1

erstens Ihre HTML ungültig ist. Sie können ul nicht als Kind eines anderen ul haben. Es muss innerhalb eines li sein. Auch der Text innerhalb der ul muss ebenfalls innerhalb einer li liegen.

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

Um dann wählen Sie diese in jQuery können Sie:

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

Sie könnten auch die weniger streng verwenden: ul ul li:first, je nachdem, wie starr müssen Sie die HTML-Struktur haften Sie definiert.

Answer 2

Sie können dazu querySelector verwenden. Überprüfen Sie das folgende Beispiel.

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>

Answer 3

die Struktur, die Sie nicht richtige vorgesehen ist, innerhalb eines <li> Tag das Kind <ul> Tag gehen sollte. dann wird die Struktur sein wie

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

dann können Sie das Kind <ul> mit Jquery als

$(".ul li ul"); 

Hoffnung zu bekommen, das hilft.

Answer 4

Zunächst müssen Sie eine Klasse oder eine ID zu Ihrer Eltern ul hinzufügen:

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

Dann entweder Ihr wählen die 2. einen auszuwählen, weil es immer der zweite sein wird (Index 1):

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

Oder Sie eine Klasse zu Ihrem <li> hinzufügen:

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

Und dann

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

Answer 5

Versuchen Sie dieses Snippet mit mehreren Optionen.

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>