無法將課程添加到元素子級

Question

我試圖根據其父類名稱在HTML文件中找到一個元素，然后向其中添加一個類。 我在這里嘗試過該解決方案，但無法正常工作。 另外，我嘗試記錄子類名稱以查看其是否正常運行，但它將返回undefined 。 我的HTML文件是這樣的：

 $(document).ready(function () { console.log($(".grid-container").find(">:first-child").className); $(".grid-container").find(">:first-child").toggleClass("search-controller"); }); 

 .search-controller { height: 100%; color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div ui-view="" class="grid-container ng-scope" style=""> <div ng-controller="citySearchController" ng-init="initialize()" class="ng-scope"> This is test data </div> </div> 

Answer 1

要從jQuery對象獲取類名，必須使用prop() 。 嘗試為元素設置某種樣式，以使更改可見（如color ）：

 $(document).ready(function () { console.log($(".grid-container").find(">:first-child").prop('class')); $(".grid-container").find(">:first-child").toggleClass("search-controller"); }); 

 .search-controller { height: 100%; color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div ui-view="" class="grid-container ng-scope" style=""> <div ng-controller="citySearchController" ng-init="initialize()" class="ng-scope"> This is test data </div> </div> 

Answer 2

使用addClass而不是toggleClass 。 toggleClass類將需要一個事件，例如click以切換該類。

 $(document).ready(function() { //console.log($(".grid-container").find(">:first-child").className); $(".grid-container").find(">:first-child").addClass("search-controller"); }); 

 .search-controller { height: 100%; border: 1px solid green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div ui-view="" class="grid-container ng-scope" style=""> <div ng-controller="citySearchController" ng-init="initialize()" class="ng-scope">Test </div> </div>