无法将课程添加到元素子级

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>