как добавить или добавить класс к последнему элементу li, используя jquery

Question

В настоящее время я не понимаю, почему последний дочерний элемент li не вставляется в последний li, этот модуль - treeview. единственная основная цель, которую мне нужно достичь, - это добавить класс к последнему li. поэтому, чтобы хорошо понять, я покажу вам пример кода и иллюстрацию ниже.

Как видите, добавленный класс находится на другом li, но предположим, что добавленный класс ('last') включен галочка.

Проблема: добавленный класс ('last') не находится справа от последнего li.

У меня два html стр.

1. posting.blade. php
2. manage_child.blade. php

posting.blade. php:

   <ul id="tree1">
        @foreach($categories as $category)
            <li>
                {{ $category->title }}
                @if(count($category->childs))
                    @include('/SuperAdmin/manage_child',['childs' => $category->childs])
                @endif
            </li>
        @endforeach
    </ul>

manage_child.blade. php:

    <ul>
@foreach($childs as $child)
    <li>
        {{ $child->title }}
    @if(count($child->childs))
            @include('/SuperAdmin/manage_child',['childs' => $child->childs])
        @endif
    </li>
@endforeach
</ul>

Treeview Js:

    $.fn.extend({
    treed: function (o) {

        var openedClass = 'far fa-minus-square';
        var closedClass = 'far fa-plus-square';

      if (typeof o != 'undefined'){
        if (typeof o.openedClass != 'undefined'){
        openedClass = o.openedClass;
        }
        if (typeof o.closedClass != 'undefined'){
        closedClass = o.closedClass;
        }
      };

        //initialize each of the top levels

        var tree = $(this);

        tree.addClass("tree");



        tree.find('li').has("ul").each(function () {



            var branch = $(this); //li with children ul

            branch.prepend("<i class=' " + closedClass + "'></i>");

            branch.addClass('branch');

            tree.find('li').not('li.branch').css( "background", "yellow" );

            branch.on('click', function (e) {

                if (this == e.target) {


                    var icon = $(this).children('i:first');

                    icon.toggleClass(openedClass + " " + closedClass);


                    $(this).children().children().toggle();

                    if (branch.find('li').last()) {
                        branch.find('li').last().addClass('last');
                    }
                }


            })

            branch.children().children().toggle();

        });

        //fire event from the dynamically added icon
        tree.find('.branch .indicator').each(function(){
            $(this).on('click', function () {
                $(this).closest('li').click();


            });
        });

        //fire event to open branch if the li contains an anchor instead of text
        tree.find('.branch>a').each(function () {
            $(this).on('click', function (e) {
                $(this).closest('li').click();
                e.preventDefault();
            });
        });
        //fire event to open branch if the li contains a button instead of text
        tree.find('.branch>button').each(function () {
            $(this).on('click', function (e) {
                $(this).closest('li').click();
                e.preventDefault();
            });
        });
    }
});

//Initialization of treeviews

$('#tree1').treed();

CSS:

    #tree1, #tree1 ul {
    margin:0;
    padding:0;
    list-style:none
}
#tree1 ul {
    margin-left:1em;
    position:relative
}
#tree1 ul ul {
    margin-left:.5em
}
#tree1 ul:before {
    content:"";
    display:block;
    width:0;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    border-left:1px solid
}
#tree1 li {
    margin:0;
    padding:0 1em;
    line-height:2em;
    font-weight:700;
    position:relative
}
#tree1 ul li:before {
    content:"";
    display:block;
    width:10px;
    height:0;
    border-top:1px solid;
    margin-top:-1px;
    position:absolute;
    top:1em;
    left:0
}
#tree1 ul li:last-child:before {
    background:#fff;
    height:auto;
    top:1em;
    bottom:0
}
.indicator {
    margin-right:5px;
}
#tree1 li a {
    text-decoration: none;
    color:#369;
}
#tree1 li button, #tree1 li button:active, #tree1 li button:focus {
    text-decoration: none;
    color:#369;
    border:none;
    background:transparent;
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
    outline: 0;
}

Также я хочу удалить желтый предыстория класса .отрасль дети

Answer 1

Вам нужно будет пройти по дереву и получить последнее. Это собирает все li и берет последний, а затем добавляет последний класс. Используйте это вместо вашего оператора .is.

branch.find('li').last().addClass('last');

Чтобы быть уверенным, если вы хотите, чтобы он был из текущего элемента, на который щелкнули, вы захотите использовать это:

$(this).find('li').last().addClass('last');