Добавить класс к <a>на основе уровня во вложенном списке - PullRequest
Новая
       13

Добавить класс к <a>на основе уровня во вложенном списке

1 голос
/ 22 февраля 2011 
<div id="ContentLeftNav"><ul class="menu">
    <li class=""><a href="#" class=" ">Test Page</a></li>
    <li class=""><a href="#" class=" ">Test Page</a></li>
    <li class=""><a href="#" class="expandNav ">Test Page</a>
            <ul class="submenu">
                    <li class=""><a href="#" class=" ">Test Page</a></li>
                    <li class=""><a href="#" class="expandNav2">Test Page</a>
                         <ul class="submenu2">
                            <li class=""><a href="#" class=" ">Test Page</a></li>
                            <li class=""><a href="#" class=" ">Test Page</a></li>
                         </ul>
                    </li>
                    <li class=""><a href="#" class=" ">Test Page</a></li>
                    <li class="last"><a href="#" class=" ">Test Page</a></li>
             </ul>
     </li>
    <li class=""><a href="#" class=" ">Test Page</a></li>
    <li class=""><a href="#" class="expandNav">Test Page</a>
            <ul class="submenu">
                    <li class=""><a href="#" class="expand2">Test Page</a></li>
                        <ul class="submenu2">
                            <li class=""><a href="#" class=" ">Test Page</a></li>
                            <li class=""><a href="#" class=" ">Test Page</a></li>
                        </ul>
                    <li class=""><a href="#" class=" ">Test Page</a></li>
            </ul>
    </li>
    <li class="last"><a href="#" class=" ">Test Page</a></li></ul></div>

Я ищу скрипт jQuery, который добавит класс к <a>, если он имеет <ul> в зависимости от уровня, в котором он находится в неупорядоченном списке.Таким образом, все <a> + <ul> Уровень 1 будет "expandNav1", а уровень 2 будет "expandNav2", а уровень 3 будет "expandNav3" и так далее.Скрипт, который я использую сейчас, не работает таким образом.Он добавляет новый номер на каждый <a> с <ul>. 

$('#ContentLeftNav ul').each(function() {
$(this).find('li:has(ul)').each(function(i) {
    $(this).find('a').addClass('expandNav' + (i+1));
});});

Как я могу изменить его, чтобы посмотреть уровень, в котором он находится?

Ответы [ 2 ]

1 голос
/ 22 февраля 2011

Вы можете сделать это с помощью рекурсивной (= вызывает себя) функции: 

/* 
    Recursive loop though UL list
*/

function loopDown($obj, x){

    // Store our current jquery objects
    var $sub = $obj.children('ul').children('li:has(ul)');
    var $a = $sub.children('a');

    // Test is we need to continue loop - if not the function ends itself.
    if ($sub){

        if (x !== 0) {
            $a.addClass('expandNav'+x);
        }

        else {
            $a.addClass('expandNav');
        }

        //Incriment counter
        x++;

        $sub.each(function(){
            // Call the function one down the line...
            loopDown($(this), x);           
        });         
    }       
}

// Run our function, pass it the jQuery object and a starting counter.
loopDown($('#ContentLeftNav'), 0);
1 голос
/ 22 февраля 2011

Вы можете использовать функцию .parents(), связанную с .length для каждой ссылки: 

$('#ContentLeftNav a').each(function() {
    $(this).addClass('expandNav' + $(this).parents('#ContentLeftNav ul').length);
});

Но если вы просто используете это для стилизации, вы можете рассмотреть возможность использования простого CSS, иПропуск JS в целом: 

#ContentLeftNav ul a {...}
#ContentLeftNav ul ul a {...}
#ContentLeftNav ul ul ul a {...}
/* And so forth. */

Обновление:

Мне кажется, я неправильно понял исходный вопрос.Если вы используете класс .expandNav для маркировки ссылок, которые используются для отображения / скрытия более подробной информации (если хотите, расширяемого дерева), и вам нужны только ссылки, которые непосредственно предшествуют <ul> s, чтобы получитькласс, тогда вы на самом деле хотите что-то еще, как это: 

$('#ContentLeftNav a + ul').each(function() {
    // $(this) is the ul, so $(this).prev() is the a:
    $(this).prev().addClass('expandNav' + $(this).parents('#ContentLeftNav ul').length);
});

Надеюсь, это поможет!

...