Cannot add class to element children

Question

I'm trying to find an element in my HTML file based on its parent class name and then add a class to it. I've tried the solution in here but it won't work. also, I've tried to log the child class name to see if it's working but it will return undefined. My HTML file is something like this:

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

Mamun · Answer 1 · 2018-07-17T06:31:03.297

2

To get the class name from jQuery object you have to use prop(). Try to set some style to the element so that the changes are visible (like 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>

edited Jul 17 '18 at 06:31

answered Jul 17 '18 at 06:21

Mamun

66,969
9
47
59

so here it's working, but when I try this in my code I got no change, I'm guessing it's because of kendo grid and its contents loading after document.ready? – amirdaraee Jul 17 '18 at 06:29
@amirdaraee, can you check the length like `$(".grid-container").find(">:first-child").length` just before toggling..... – Mamun Jul 17 '18 at 06:34
kendo generate the code see in F12 how it looks after run – לבני מלכה Jul 17 '18 at 06:34
@Mamun I got 0 for length. – amirdaraee Jul 17 '18 at 06:40
@Mamun tnx, so is there a way to run the code after kendo generated the content? – amirdaraee Jul 17 '18 at 06:44
Write a `dataBound` event handler to run code after kendo generates the grid content – Richard Jul 17 '18 at 08:18

score 0 · Answer 2 · answered Jul 17 '18 at 06:20

Use addClass instead of toggleClass.toggleClass class will require an event like click to toggle the class.

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

Tnx for the tip, but it seems there is another problem, kendo generates its content after document.ready. — amirdaraee, Jul 17 '18 at 06:45

Cannot add class to element children

2 Answers2