javascript - 關於ng-repeat，取得DOM渲染完後的元素出現問題？

Question

我用ng-repeat渲染出資料後，想修改某一個指定的DOM元素的樣式，下面是範例程式碼

    <ul ng-repeat="item in city" repeat-done="cityFinish()">
        <li class="city city{{$index}}">{{item}}</li>
    </ul>

    $scope.cityFinish = function() {
        $('.city').css('background', 'red');
        $('.city1').css('background', 'green');
    };

其中 $('.city').css('background', 'red');有效，但$('.city1').css('background', ' green');無效，這是什麼原因？

Answer 1

我專案嘗試是可以的 ， city{{$index}}是從city0可以 你可以檢視元素看下class是否變成city1 ，然後可以試著斷點$('.city1')是否取到了dom元素

Answer 2

你先審查一下元素。確保它的 class 是對的。
首先，不知道你的 repeat-done 是如何寫的。這應該不是 angularjs 自帶的。
其次，為什麼不把顏色寫到 css 中，然後用 ng-class 或 ng-style 處理，一定要用 jQuery 呢。

你的需求是不是，除了 index 為 1 的背景色為綠色，其他的都為紅色？

<ul ng-repeat="(index, item) in city">
  <li class="bg-red" ng-class="{'bg-green': $index == 1}">{{item}}</li>
</ul>

.bg-red {
  background: 'red';
}

.bg-green {
  background: 'green';
}

能不用 jQuery 就別用，更何況你還有內建的 jqLit​​e 可以用。 。 。 jQuery 作為第三方函式庫，如果你不針對 angularjs 封裝，那麼你不能保證它的執行一定是在產生節點之後的，特別是對於 custom directive。