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

【问题标题】：.first() element not working with dynamic generated <li>.first() 元素不适用于动态生成的 <li>
【发布时间】：2015-09-03 06:24:43
【问题描述】：

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

我正在使用此代码动态生成导航选项卡：

<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 >

在上面的代码中，类是空白的。以上代码可以根据 storageOption (ng-repeat) 中的元素数量创建多个 li。

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

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

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

谁能告诉我我在这里失踪的地方。

提前致谢。

【问题讨论】：

添加新组件后，您必须为所有人重新初始化事件以执行新添加的事件
jsfiddle.net/jm1yf5tk/1

标签： javascript jquery html angularjs spring

【解决方案1】：

您需要以角度方式进行操作，因为 Angular 确实通过 ng-class 提供了该选项，基本上需要像 ng-class="{'class': expression}" 这样的表达式。在 ng-class 表达式中，您可以使用 $first 告诉您它的第一个元素 @ 987654325@与否，并使用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 数组，你可以拥有独一无二的东西。

【讨论】：

感谢 Pankaj 的回复。它奏效了。只是一个小的编辑：ng-class="{'active': $first}" （在第一个例子中）

【解决方案2】：

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

尝试使用不同的选择器来选择第一个 li

FIDDLE

【讨论】：

【解决方案3】：

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

【讨论】：