Как из списка ul выбрать li первого уровня?

354

09 мая 2017, 05:09

Как из списка 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>

Answer 1

Возможно, это не оптимально, но я бы сделал так:

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>

Answer 2

на самом деле ты уже выбрал li первого уровня, просто свойство color - наследуется, если установишь 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>

Answer 3

Первый элемент и многое другое вы можете сделать через псевдокалссы , как и в CSS

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

если вы хотите найти только первый класс лист то воспользуйтесь

.filter( ':first' );

на данный момент вы ищите все классы list

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Показать плавно текст на слайдере через определенное время

Здравствуйте!

244

CSS

Optimize CSS Delivery

Есть стандартная задача - оптимизировать загрузку CSS

271

CSS

Не корректное отображение шрифта с Гугл фонтс

Здравствуйте! Неожиданно проявилась такая проблема - на мобильном Леново старой модели шрифт на сайте отображается не корректно

334

CSS

Вопрос по формам/

Читал в статье что при создании формы никогда не надо label заменяйте на placeholder, это важное дополнение, но никак не заменаПочему так? Вёдь при...

208