如何使用 JavaScript 编辑递归生成列表中的最后一项？

Question

正在尝试完全按照我的问题进行操作，但我遇到了严重的问题。 DOM 与 jQuery 的操作对我来说仍然是新的。

这是我的代码：

HTML - partials/institution-selector-checkbox.html

<div class="institution-select__wrap" ng-click="checkInstitution($event)">
  <div class="toggle">
    <span class="icon icon-chevron-right" ng-click="dropDown($event)" ng-mouseover="institutionHoverOn($event)" ng-mouseleave="institutionHoverOff($event)"></span>
 </div>
  <input type="checkbox" id="{{ childInstitution.id }}" />
  <label for="{{ childInstitution.id }}">
    <a ng-click="dropDown($event)" ng-mouseover="institutionHoverOn($event)" ng-mouseleave="institutionHoverOff($event)" class='institution-selector-dropdown'>
        {{ childInstitution.name }}
    </a>
    <a class="entireGroupLinks" ng-click="selectEntireGroup($event)">
       (entire group}
   </a>
  </label>
 </div>
<ul style="display:block" class="ng-hide institution-selector">
   <li ng-repeat="childInstitution in childInstitution.child" ng-include="'partials/institution-selector-checkbox.html'" ng-click="checkForChild(childInstitution, $index)"></li>
</ul>

JS

$scope.$on('$viewContentLoaded', function() {
  var isg = document.getElementsByClassName('institution-select__group');
  $timeout(function(){
    var list = $(isg).find('li');
      for (var item in list) {
        if(typeof list[item] === 'object' && list[item].className === 'ng-scope') {
          var ul = $(list[item]).find('ul');
          function removeLastChevron(o) {   
            if($(o).children.length > 0) {

            } else {
              angular.noop;
            }
          };
          removeLastChevron(ul);
        }
      }
  });
})

我的问题是我想编辑下拉树最低级别的 CSS 行，例如从这些行中删除人字形。

Answer 1

如果想获取最后一个子元素，可以这样使用：

var lastChild = $('ul li:last-child');

这是一些工作代码的示例：https://jsfiddle.net/297zk3tc/

Answer 2

ng-repeat 为转发器中的每个项目创建一个子作用域。此子范围包括 $last 和 $first 以及您已经在使用的 $index 等属性。

您可以使用 ng-class 和 css 规则来隐藏您的人字形

<div ng-class="{'last-item': $last}">

或者检查子数据可以使用类似的东西：

<div ng-class="{'no-children': !childInstitution.child.length }">

然后在 css 中使用如下内容：

.last-item .chevron-class{ display:none}

如果您需要完全删除元素可以使用 ng-if 或 ng-switch

Answer 3

鉴于你的形象，你可以用纯 CSS:

.institution-selector li { /*this is all list items */ }

    .institution-selector li li { /*this is all second or third level list items */ }

        .institution-selector li li li { /*this is all third level list items */ }

    .institution-selector li:last-child { /*this is the last item in a list of items */ }

    .institution-selector li ul { /*this is a list within a list item */ }

等等

如何使用 JavaScript 编辑递归生成列表中的最后一项？

How to edit the last item in a recursively generate list with JavaScript?

html

javascript

tree

jquery

angularjs