主页 / 问题 / 662813
Accepted
Taypfoon
Asked:2020-05-07 02:39:23 +0000 UTC2020-05-07 02:39:23 +0000 UTC

如何从列表ul中选择第一级的li？

  • 772

如何从 ul 的列表中只选择第一级的 li ？ 

$('.list>li').clone().appendTo('.res');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list">
  <li>First</li>
  <li>Second
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3 </li>
    </ul>
  </li>
  <li>Third
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3
        <ul>
          <li>555</li>
          <li>666</li>
          <li>777</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
<hr>
<div class="res"></div>
<hr> А хочется получить
<li>First</li>
<li>Second</li>
<li>Third</li>

jquery

3 个回答

  1. 其实你已经选择了第一层的li，只是继承了color属性，如果你设置ul的颜色，区别会很明显

    $('.list>li').css('color', 'blue');
    ul {
  color: green;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list">
  <li>First</li>
  <li>Second
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3 </li>
    </ul>
  </li>
  <li>Third
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3
        <ul>
          <li>555</li>
          <li>666</li>
          <li>777</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

    • 1
  2. Best Answer

    它可能不是最佳的，但我会这样做：

    temp = $('.list>li').clone();
temp.children().remove();
temp.appendTo('.res')
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list">
  <li>First</li>
  <li>Second
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3 </li>
    </ul>
  </li>
  <li>Third
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3
        <ul>
          <li>555</li>
          <li>666</li>
          <li>777</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
<hr>
<div class="res"></div>

    • 1

  3. 第一个元素和更多你可以用伪调用做的，就像在 CSS 中一样

       $('.list>li:first').css('color', 'blue');

    如果你只想找到头等舱表然后使用

    .filter( ':first' );

    目前您正在寻找所有列表类

    • 0

相关问题