.first(） 元素不适用于动态生成的 <li>

.first() element not working with dynamic generated <li>

本文关键字：li 元素 不适用 动态 适用于 first      更新时间：2023-09-26

我想我在这里遗漏了一些小概念，但已经做了足够的谷歌搜索来找到它，但没有用。因此，在此论坛上发帖寻求帮助。

我使用以下代码动态生成导航选项卡：

<div class="tabbable">  
 <ul class="nav nav-tabs"  id="testing">
   <li ng-repeat="storageOption in gridOptions[$index].ownedJay" class=""><a href="#c{{storageOption.StorageHostname}}" >Data{{storageOption.StorageHostname}}</a></li>

   </ul >

在上面的代码中，类留空。上面的代码可以根据存储选项(ng-repeat(中的元素数量创建许多li。

但是我只想在第一个li中添加类"活动"。为此，我在同一页面的脚本部分添加了以下代码：

$(".tabbable ul li").first().addClass("active");

但是上面的代码是在生成的所有li中添加活动类。

谁能让我知道我在这里错过了什么。

提前谢谢。

您需要

以角度方式执行此操作，因为角度确实通过基本上需要像ng-class="{'class': expression}"这样的表达式的ng-class提供了该选项。ng-class表达式中，您可以使用告诉您其第一个元素是否ng-repeat的$first，并使用ng-href而不是href。

标记

<li ng-repeat="storageOption in gridOptions[$index].ownedJay" ng-class="{'active': first}">
    <a ng-href="#c{{storageOption.StorageHostname}}" >Data{{storageOption.StorageHostname}}</a>
</li>

另类

如果要使活动可切换，则只需维护一个标志，该标志将包含选择哪个li的信息。

<ul class="nav nav-tabs" id="testing" ng-init="selected=0">
    <li ng-repeat="storageOption in gridOptions[$index].ownedJay" 
      ng-class="{'active': $index == $parent.selected}" 
      ng-click="$parent.selected == $index">
        <a ng-href="#c{{storageOption.StorageHostname}}" >
          Data{{storageOption.StorageHostname}}
        </a>
    </li>
</ul >

在上面的标记中，我使用了$index但是如果你有它，你可以ng-repeat数组

。
$(".tabbable").find('li:nth-child(1)').addClass("active");

尝试使用其他选择器来选择第一个 li

小提琴

您可以使用

ng-class 属性检查$index是否为 0，然后添加活动类。

相关文章：