将 div 光标设置到嵌套 li 的选定值的点

Question

我正在使用 abn 树在前端使用 AngularJS html 生成带有一些数据的树。树的深度由运行时间决定。首先，树将加载完全展开到最后一层的条件，例如当我点击：11-B-(iii) 然后它展开树，如图所示：

带有选定子文本的树：11-B-(iii)

由于树是使用 abn 树生成的，所以它工作正常。

当它第一次加载显示选择的树的最后一个元素时，这已经完成了。

代码块：

<div class="col-sm-4" style="min-height:580px;max-height:600px;overflow:scroll;border:1px solid grey;">
                    <ul class="nav nav-list nav-pills nav-stacked abn-tree ng-isolate-scope" tree-data="my_data" tree-control="my_tree" on-select="vm.my_tree_handler(branch)" expand-level="10">
  <!-- ngRepeat: row in tree_rows | filter:{visible:true} track by row.branch.uid --><li ng-repeat="row in tree_rows | filter:{visible:true} track by row.branch.uid" ng-animate="'abn-tree-animate'" ng-class="'level-' + 1 + (row.branch.selected ? ' active':'')" class="abn-tree-row ng-scope level-1">
    <a ng-click="user_clicks_branch(row.branch)">
      <i ng-class="row.tree_icon" ng-click="row.branch.expanded = !row.branch.expanded" class="indented tree-icon icon-minus glyphicon glyphicon-minus fa fa-minus" role="button" tabindex="0"> </i>
      <span class="indented tree-label ng-binding">Root </span>
    </a>
  </li><!-- end ngRepeat: row in tree_rows | filter:{visible:true} track by row.branch.uid --><li ng-repeat="row in tree_rows | filter:{visible:true} track by row.branch.uid" ng-animate="'abn-tree-animate'" ng-class="'level-' + 2 + (row.branch.selected ? ' active':'')" class="abn-tree-row ng-scope level-2">
    <a ng-click="user_clicks_branch(row.branch)">
      <i ng-class="row.tree_icon" ng-click="row.branch.expanded = !row.branch.expanded" class="indented tree-icon icon-minus glyphicon glyphicon-minus fa fa-minus" role="button" tabindex="0"> </i>
      <span class="indented tree-label ng-binding">Child-I </span>
    </a>
  </li><!-- end ngRepeat: row in tree_rows | filter:{visible:true} track by row.branch.uid --><li ng-repeat="row in tree_rows | filter:{visible:true} track by row.branch.uid" ng-animate="'abn-tree-animate'" ng-class="'level-' + 3 + (row.branch.selected ? ' active':'')" class="abn-tree-row ng-scope level-3">
    <a ng-click="user_clicks_branch(row.branch)">
      <i ng-class="row.tree_icon" ng-click="row.branch.expanded = !row.branch.expanded" class="indented tree-icon icon-file  glyphicon glyphicon-file fa fa-file" role="button" tabindex="0"> </i>
      <span class="indented tree-label ng-binding">SubChild-1</span>
    </a>
  </li><!-- end ngRepeat: row in tree_rows | filter:{visible:true} track by row.branch.uid --><li ng-repeat="row in tree_rows | filter:{visible:true} track by row.branch.uid" ng-animate="'abn-tree-animate'" ng-class="'level-' + 3 + (row.branch.selected ? ' active':'')" class="abn-tree-row ng-scope level-3">
    <a ng-click="user_clicks_branch(row.branch)">
      <i ng-class="row.tree_icon" ng-click="row.branch.expanded = !row.branch.expanded" class="indented tree-icon icon-file  glyphicon glyphicon-file fa fa-file" role="button" tabindex="0"> </i>
      <span class="indented tree-label ng-binding">SubChild-2</span>
    </a>
  </li><!-- end ngRepeat: row in tree_rows | filter:{visible:true} track by row.branch.uid --><li ng-repeat="row in tree_rows | filter:{visible:true} track by row.branch.uid" ng-animate="'abn-tree-animate'" ng-class="'level-' + 3 + (row.branch.selected ? ' active':'')" class="abn-tree-row ng-scope level-3">
    <a ng-click="user_clicks_branch(row.branch)">
      <i ng-class="row.tree_icon" ng-click="row.branch.expanded = !row.branch.expanded" class="indented tree-icon icon-file  glyphicon glyphicon-file fa fa-file" role="button" tabindex="0"> </i>
      <span class="indented tree-label ng-binding">SubChild-3</span>
    </a>
  </li><!-- end ngRepeat: row in tree_rows | filter:{visible:true} track by row.branch.uid --><li ng-repeat="row in tree_rows | filter:{visible:true} track by row.branch.uid" ng-animate="'abn-tree-animate'" ng-class="'level-' + 3 + (row.branch.selected ? ' active':'')" class="abn-tree-row ng-scope level-3">
    <a ng-click="user_clicks_branch(row.branch)">
      <i ng-class="row.tree_icon" ng-click="row.branch.expanded = !row.branch.expanded" class="indented tree-icon icon-file  glyphicon glyphicon-file fa fa-file" role="button" tabindex="0"> </i>
      <span class="indented tree-label ng-binding">SubChild-4</span>
    </a>
  </li><!-- end ngRepeat: row in tree_rows | filter:{visible:true} track by row.branch.uid --><li ng-repeat="row in tree_rows | filter:{visible:true} track by row.branch.uid" ng-animate="'abn-tree-animate'" ng-class="'level-' + 3 + (row.branch.selected ? ' active':'')" class="abn-tree-row ng-scope level-3">
    <a ng-click="user_clicks_branch(row.branch)">
      <i ng-class="row.tree_icon" ng-click="row.branch.expanded = !row.branch.expanded" class="indented tree-icon icon-file  glyphicon glyphicon-file fa fa-file" role="button" tabindex="0"> </i>
      <span class="indented tree-label ng-binding">SubChild-5</span>
    </a>
  </li><!-- end ngRepeat: row in tree_rows | filter:{visible:true} track by row.branch.uid --><li ng-repeat="row in tree_rows | filter:{visible:true} track by row.branch.uid" ng-animate="'abn-tree-animate'" ng-class="'level-' + 3 + (row.branch.selected ? ' active':'')" class="abn-tree-row ng-scope level-3">
    <a ng-click="user_clicks_branch(row.branch)">
      <i ng-class="row.tree_icon" ng-click="row.branch.expanded = !row.branch.expanded" class="indented tree-icon icon-file  glyphicon glyphicon-file fa fa-file" role="button" tabindex="0"> </i>
      <span class="indented tree-label ng-binding">SubChild-6 </span>
    </a>
  </li><!-- end ngRepeat: row in tree_rows | filter:{visible:true} track by row.branch.uid --><li ng-repeat="row in tree_rows | filter:{visible:true} track by row.branch.uid" ng-animate="'abn-tree-animate'" ng-class="'level-' + 3 + (row.branch.selected ? ' active':'')" class="abn-tree-row ng-scope level-3">
    <a ng-click="user_clicks_branch(row.branch)">
      <i ng-class="row.tree_icon" ng-click="row.branch.expanded = !row.branch.expanded" class="indented tree-icon icon-file  glyphicon glyphicon-file fa fa-file" role="button" tabindex="0"> </i>
      <span class="indented tree-label ng-binding">SubChild-7 </span>
    </a>
  </li><!-- end ngRepeat: row in tree_rows | filter:{visible:true} track by row.branch.uid --><li ng-repeat="row in tree_rows | filter:{visible:true} track by row.branch.uid" ng-animate="'abn-tree-animate'" ng-class="'level-' + 3 + (row.branch.selected ? ' active':'')" class="abn-tree-row ng-scope level-3">
    <a ng-click="user_clicks_branch(row.branch)">
      <i ng-class="row.tree_icon" ng-click="row.branch.expanded = !row.branch.expanded" class="indented tree-icon icon-file  glyphicon glyphicon-file fa fa-file" role="button" tabindex="0"> </i>
      <span class="indented tree-label ng-binding">SubChild-8 </span>
    </a>
  </li><!-- end ngRepeat: row in tree_rows | filter:{visible:true} track by row.branch.uid --><li ng-repeat="row in tree_rows | filter:{visible:true} track by row.branch.uid" ng-animate="'abn-tree-animate'" ng-class="'level-' + 3 + (row.branch.selected ? ' active':'')" class="abn-tree-row ng-scope level-3">
    <a ng-click="user_clicks_branch(row.branch)">
      <i ng-class="row.tree_icon" ng-click="row.branch.expanded = !row.branch.expanded" class="indented tree-icon icon-file  glyphicon glyphicon-file fa fa-file" role="button" tabindex="0"> </i>
      <span class="indented tree-label ng-binding">SubChild-9 </span>
    </a>
  </li><!-- end ngRepeat: row in tree_rows | filter:{visible:true} track by row.branch.uid --><li ng-repeat="row in tree_rows | filter:{visible:true} track by row.branch.uid" ng-animate="'abn-tree-animate'" ng-class="'level-' + 3 + (row.branch.selected ? ' active':'')" class="abn-tree-row ng-scope level-3">
    <a ng-click="user_clicks_branch(row.branch)">
      <i ng-class="row.tree_icon" ng-click="row.branch.expanded = !row.branch.expanded" class="indented tree-icon icon-file  glyphicon glyphicon-file fa fa-file" role="button" tabindex="0"> </i>
      <span class="indented tree-label ng-binding">SubChild-10 </span>
    </a>
  </li>
  <li ng-repeat="row in tree_rows | filter:{visible:true} track by row.branch.uid" ng-animate="'abn-tree-animate'" ng-class="'level-' + 3 + (row.branch.selected ? ' active':'')" class="abn-tree-row ng-scope level-3">
    <a ng-click="user_clicks_branch(row.branch)">
      <i ng-class="row.tree_icon" ng-click="row.branch.expanded = !row.branch.expanded" class="indented tree-icon icon-minus glyphicon glyphicon-minus fa fa-minus" role="button" tabindex="0"> </i>
      <span class="indented tree-label ng-binding">SubChild-11 </span>
    </a>
  </li><!-- end ngRepeat: row in tree_rows | filter:{visible:true} track by row.branch.uid --><li ng-repeat="row in tree_rows | filter:{visible:true} track by row.branch.uid" ng-animate="'abn-tree-animate'" ng-class="'level-' + 4 + (row.branch.selected ? ' active':'')" class="abn-tree-row ng-scope level-4">
    <a ng-click="user_clicks_branch(row.branch)">
      <i ng-class="row.tree_icon" ng-click="row.branch.expanded = !row.branch.expanded" class="indented tree-icon icon-file  glyphicon glyphicon-file fa fa-file" role="button" tabindex="0"> </i>
      <span class="indented tree-label ng-binding">SubSubchild-A </span>
    </a>
  </li><!-- end ngRepeat: row in tree_rows | filter:{visible:true} track by row.branch.uid --><li ng-repeat="row in tree_rows | filter:{visible:true} track by row.branch.uid" ng-animate="'abn-tree-animate'" ng-class="'level-' + 4 + (row.branch.selected ? ' active':'')" class="abn-tree-row ng-scope level-4">
    <a ng-click="user_clicks_branch(row.branch)">
      <i ng-class="row.tree_icon" ng-click="row.branch.expanded = !row.branch.expanded" class="indented tree-icon icon-minus glyphicon glyphicon-minus fa fa-minus" role="button" tabindex="0"> </i>
      <span class="indented tree-label ng-binding">SubSubchild-B </span>
    </a>
  </li><!-- end ngRepeat: row in tree_rows | filter:{visible:true} track by row.branch.uid --><li ng-repeat="row in tree_rows | filter:{visible:true} track by row.branch.uid" ng-animate="'abn-tree-animate'" ng-class="'level-' + 5 + (row.branch.selected ? ' active':'')" class="abn-tree-row ng-scope level-5">
    <a ng-click="user_clicks_branch(row.branch)">
      <i ng-class="row.tree_icon" ng-click="row.branch.expanded = !row.branch.expanded" class="indented tree-icon icon-file  glyphicon glyphicon-file fa fa-file" role="button" tabindex="0"> </i>
      <span class="indented tree-label ng-binding">SubSubSubchild-(i) </span>
    </a>
  </li><!-- end ngRepeat: row in tree_rows | filter:{visible:true} track by row.branch.uid --><li ng-repeat="row in tree_rows | filter:{visible:true} track by row.branch.uid" ng-animate="'abn-tree-animate'" ng-class="'level-' + 5 + (row.branch.selected ? ' active':'')" class="abn-tree-row ng-scope level-5">
    <a ng-click="user_clicks_branch(row.branch)">
      <i ng-class="row.tree_icon" ng-click="row.branch.expanded = !row.branch.expanded" class="indented tree-icon icon-file  glyphicon glyphicon-file fa fa-file" role="button" tabindex="0"> </i>
      <span class="indented tree-label ng-binding">SubSubSubchild-(ii) </span>
    </a>
  </li><!-- end ngRepeat: row in tree_rows | filter:{visible:true} track by row.branch.uid --><li ng-repeat="row in tree_rows | filter:{visible:true} track by row.branch.uid" ng-animate="'abn-tree-animate'" ng-class="'level-' + 5 + (row.branch.selected ? ' active':'')" class="abn-tree-row ng-scope level-5 active">
    <a ng-click="user_clicks_branch(row.branch)">
      <i ng-class="row.tree_icon" ng-click="row.branch.expanded = !row.branch.expanded" class="indented tree-icon icon-file  glyphicon glyphicon-file fa fa-file" role="button" tabindex="0"> </i>
      <span class="indented tree-label ng-binding">SubSubSubchild-(iii) </span>
    </a>
  </li><!-- end ngRepeat: row in tree_rows | filter:{visible:true} track by row.branch.uid --><li ng-repeat="row in tree_rows | filter:{visible:true} track by row.branch.uid" ng-animate="'abn-tree-animate'" ng-class="'level-' + 4 + (row.branch.selected ? ' active':'')" class="abn-tree-row ng-scope level-4">
    <a ng-click="user_clicks_branch(row.branch)">
      <i ng-class="row.tree_icon" ng-click="row.branch.expanded = !row.branch.expanded" class="indented tree-icon icon-file  glyphicon glyphicon-file fa fa-file" role="button" tabindex="0"> </i>
      <span class="indented tree-label ng-binding">SubSubchild-C </span>
    </a>
  </li><!-- end ngRepeat: row in tree_rows | filter:{visible:true} track by row.branch.uid --><li ng-repeat="row in tree_rows | filter:{visible:true} track by row.branch.uid" ng-animate="'abn-tree-animate'" ng-class="'level-' + 4 + (row.branch.selected ? ' active':'')" class="abn-tree-row ng-scope level-4">
    <a ng-click="user_clicks_branch(row.branch)">
      <i ng-class="row.tree_icon" ng-click="row.branch.expanded = !row.branch.expanded" class="indented tree-icon icon-file  glyphicon glyphicon-file fa fa-file" role="button" tabindex="0"> </i>
      <span class="indented tree-label ng-binding">SubSubchild-D </span>
    </a>
  </li><!-- end ngRepeat: row in tree_rows | filter:{visible:true} track by row.branch.uid --><li ng-repeat="row in tree_rows | filter:{visible:true} track by row.branch.uid" ng-animate="'abn-tree-animate'" ng-class="'level-' + 4 + (row.branch.selected ? ' active':'')" class="abn-tree-row ng-scope level-4">
    <a ng-click="user_clicks_branch(row.branch)">
      <i ng-class="row.tree_icon" ng-click="row.branch.expanded = !row.branch.expanded" class="indented tree-icon icon-file  glyphicon glyphicon-file fa fa-file" role="button" tabindex="0"> </i>
      <span class="indented tree-label ng-binding">SubSubchild-E </span>
    </a>
  </li><!-- end ngRepeat: row in tree_rows | filter:{visible:true} track by row.branch.uid -->
</ul>
</div>

注意点：

• 树的深度不固定。它可能会根据单击以加载树的文本而有所不同。
• 树结构将不一样。它可能会根据单击以加载树的文本而有所不同。
• 起初用户不会点击任何节点，我只需要在顶部显示滚动即可显示选定的子节点而无需滚动。

我需要做什么？

我需要将 div 的光标设置为在 div 顶部某处可见点处的选定元素 li，这样用户无需向下滚动即可查看选定的 div。在给定的示例中，树加载了少量元素，但实际树将加载许多子级及其子级层次结构。

我尝试获取值并与字符串匹配，但加载时我不知道树的深度。我可能只知道最后一次选择的节点的名称，例如：SubSubSubchild-(iii)

如何将 div 的光标设置到特定点到顶部以在顶部显示 div？

Answer 1

jQuery 是一种解决方案。

检查您的代码后，我发现您一直在使用 ABN 树，所以您可以做的是，找到具有活动类的 li 的索引（默认情况下在 ABN 树中选择）并将其设置为 scrollTop 属性。

var index=$("#treeDiv ul li.active").index();
$("#treeDiv").scrollTop(index*15); 

注意：将索引值乘以每个 li 的高度。 这是我根据您的查询制作的Fiddler。