Jquery CSS-вложенные <li> 4 уровня глубокой вызова родителя

0

Итак, я стилю динамического меню, поэтому я не могу просто назначить имена классов или даже просто html-код.

Вот что я имею в виду: мне нужно стилизовать каждого родителя примерно так:

    <div class="menu">
    <ul>
     <li>
    Level 1
    <ul>
      <li>Level 2</li>
       <li>Level 2
           <ul>
           <li>Level 3</li>
           <li>Level 3</li>
           <li>Level 3
            <ul>
             <li>Level 4</li>
             <li>Level 4</li>
             <li>Level 4</li>
             <li>Level 4</li> 
            </ul>
           </li>
           </ul>
       </li>
        <li>Level 2</li>
         <li>Level 2</li>
    </ul>      
 </li>
</ul> 
</div>

И мне нужно изменить всех родителей с jquery впоследствии с чем-то вроде:

jQuery('.menu').find('li.parent').prepend('<i class="icon-plus"></i>');

Мне нужно изменить всех родителей с помощью детского меню. Как мне это сделать? заранее спасибо

Теги:
nested

6 ответов

2
Лучший ответ

Это должно сработать, если я правильно понял ваш вопрос:

jQuery('.menu li > ul').parent().prepend('<i class="icon-plus"></i>');

http://jsfiddle.net/Zgaj3/

Поделиться
  • 0
    Потрясающие! Еще одна вещь, какой бы они были? .box .box-категория li> ul.parent i?
  • 0
    Я думаю, что «.menu i.icon-plus» в большинстве случаев достаточно. Я сделал короткий пример с функцией щелчка, которая переключает дочерние элементы. jsfiddle.net/Zgaj3/1
0

//возвращает все элементы li внутри класса меню

$('.menu').find('li');

после этого он найдет 4-й уровень и каждый уровень.

$('.menu').find('ul li ul li ul li ul li').each(function(index, element){
  // validate that this is indeed correct
  // 4th level elements and deeper
  console.log(element);
  // do stuff
});

Честно говоря, лучше всего использовать класс при создании этих элементов html. Он быстрее и помогает другим людям читать код.

Поделиться
0

Я думаю, что это может сработать в вашей ситуации (li: parent).

jQuery('.menu').find('li:parent').prepend('<i style="" class="icon-plus"></i>');
Поделиться
0

Я не уверен в ваших требованиях, но, думаю, вам сложно найти элементы LI, которые содержат UL. Следующий код поможет вам найти такие элементы.

$('.menu li>ul').parent().addClass('node')

Теперь вы можете выполнить требуемую операцию. Пожалуйста, вернитесь, если потребуется дополнительная помощь.

Пожалуйста, отметьте как ответ, если это поможет вам.

Поделиться
0

Я не уверен, правильно ли понял ваш вопрос.

Во всяком случае, самым простым решением для моей проблемы является повторение каждого элемента ul после элемента.menu и проверка того, является ли родитель элементом li и применяет ваш стиль:

jQuery('.menu').find('ul').each(function(){
    if (jQuery(this).parent().is('li'))
        jQuery(this).parent().prepend('<i class="icon-plus"></i>');
});
Поделиться
0

Я думаю, вам понадобится инструкция if, например:

if ($('.menu>ul>li>ul')){
  $('.menu>ul').prepend('<i class="icon-plus"></i>');
}

Может потребоваться сделать один для каждого уровня, так что:

if ($('.menu>ul>li>ul>li>ul')){
  $('.menu>ul>li>ul').prepend('<i class="icon-plus"></i>');
}
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню