Question

我有以下HTML

<ul>
    <li>hello</li>
    <ul>
        <li>Hello world1</li>
        <li>Hello world2</li>
    </ul>
    <li>bye</li>
</ul>

我想抓住内部的Li，即输出

Hello world1
Hello world2

我试过

$('ul > ul > li').css("background", "green");

但选择器的形成可能是错误的。

Answer 1

内部<ul>不是外部<ul>的直接子项，因此child selector >选择器无效。

使用descendant selector

$('ul ul > li')

$('ul ul > li').css('color', 'green');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<ul>
 <li>hello</li>   
      <ul>
          <li>Hello world1</li>
          <li>Hello world2</li>
       </ul>  
 <li>bye</li>
</ul>

我想抓住内部的Li，即输出


Hello world1

Hello world2

$('ul ul > li').each(function() {
  console.log($(this).text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<ul>
  <li>hello</li>
  <ul>
    <li>Hello world1</li>
    <li>Hello world2</li>
  </ul>
  <li>bye</li>
</ul>

Answer 2

您可以选择如下所示

$('ul ul li').css('color','red')

工作演示

$(document).ready(function(){
  $('ul ul li').css('color','red')
   
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
 <li>hello</li>   
      <ul>
          <li>Hello world1</li>
          <li>Hello world2</li>
       </ul>  
 <li>bye</li>
</ul>

或

您可以选择如下所示

$('ul').find('ul li').css('color','red')

工作演示

$(document).ready(function(){ $('ul').find('ul li').css('color','red') });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li>hello</li> <ul> <li>Hello world1</li> <li>Hello world2</li> </ul> <li>bye</li> </ul>

Answer 3

为了最佳使用，在内部ul

中添加一个类

<ul>
    <li>hello</li>
    <ul class="inner-ul">
        <li>Hello world1</li>
        <li>Hello world2</li>
    </ul>
    <li>bye</li>
</ul>

JS：

$('.inner-ul').css("background", "green");

如何抓住Ul的内部

3 个答案: