Добавление каретки внутри элемента ссылки с помощью jquery - PullRequest
Новая
       7

Добавление каретки внутри элемента ссылки с помощью jquery

0 голосов
/ 31 августа 2018

Я пытаюсь вставить каретку после любого элемента ссылки, т.е. Список A, Список B, Список C, Список D . если список (<li class="level0">) содержит более одного элемента.

Смотрите мой HTML ниже 

<nav class="navigation" data-action="navigation">
<ul class="ui-id-2">
<li class="level0"><a href="#">List A</a></li>
<li class="level0"><a href="#">List B</a></li>
<li class="level0"><a href="#">List C</a>
    <ul class="ui-id-3">
            <li class="level0"><a href="#">in A</a></li>
            <li class="level0"><a href="#">in B</a></li>
            <li class="level0"><a href="#">in C</a></li>
        </ul>
</li>
<li class="level0"><a href="#">List D</a></li>

</ul>

</nav>

Это то, что я пытался сделать безуспешно 

    $(document).ready(function(){


 $('.navigation .level0 > a').each(function() {
        if($(this).parent('li').children('a').size() > 1 ) {
           $(this).append('<span class="dwn">▼</span>');
        }           
    });

});

Это глупый вопрос, но ваша помощь будет оценена. Спасибо.

1 Ответ

0 голосов
/ 31 августа 2018

Попробуйте, я также привел пример n-уровня. 

$('.navigation .level0 a').each(function() {
  var hasElements = $(this).closest('.level0').find('li').length>0;
        if(hasElements) {
           $(this).append('<span class="dwn">▼</span>');
        }           
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navigation" data-action="navigation">
<ul class="ui-id-2">
<li class="level0"><a href="#">List A</a></li>
<li class="level0"><a href="#">List B</a></li>
<li class="level0"><a href="#">List C</a>
    <ul class="ui-id-3">
            <li class="level0"><a href="#">in A</a>
            <ul class="ui-id-3">
            <li class="level0"><a href="#">in A</a></li>
            <li class="level0"><a href="#">in B</a></li>
            <li class="level0"><a href="#">in C</a></li>
        </ul></li>
            <li class="level0"><a href="#">in B</a></li>
            <li class="level0"><a href="#">in C</a></li>
        </ul>
</li>
<li class="level0"><a href="#">List D</a></li>

</ul>

</nav>

Обновление Единственное, что можно изменить в вашем коде, это сделать 

$(this).closest('.level0').find('li').length

Когда вы нацеливаетесь на якорь, вам нужно найти его ближайший элемент li. Поскольку эта структура HTML будет иметь элементы списка во вложенной форме.

Под вложенным я подразумевал, что вы можете иметь выпадающие списки для иерархии n-уровня (список (li) в список (li)).

Итак, мы проверили, есть ли у ближайшего элемента li текущего якоря дочерние элементы как li, и проверили, что их длина больше 0.

...