Question

我正尝试根据其父类名称在HTML文件中找到一个元素，然后向其添加一个类。我已经在here中尝试了该解决方案，但是它不起作用。另外，我尝试记录子类名称以查看其是否正常运行，但它将返回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>

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

2 个答案: