By Keutelvocht

2019-11-08 14:13:10 8 Comments

Im trying to toggle between 2 classes after an ajax call but i get this error:

TypeError: toggleButton.children(...)[0].toggleClass is not a function

This is my code

toggleButton.children()['0'].toggleClass('fa-check fa-times');

This is the element i am trying to toggle how it shows in the console

<i class="fas fa-times" style="color:red">


@Rory McCrossan 2019-11-08 14:15:01

Accessing a jQuery object by index (eg. children()[0]) returns the underlying Element object, not a jQuery object, hence toggleClass() is undefined.

To fix this you can use jQuery's methods instead of [0]. In this case, either first() or eq(0) will work:

toggleButton.children().first().toggleClass('fa-check fa-times'); 

@Keutelvocht 2019-11-08 14:17:08

Just found this works to .find(">:first-child") but your answer works also. Thanks alot!

@Rory McCrossan 2019-11-08 14:18:28

No problem, glad to help. Just for reference there's also :nth-child(), :first-child and :first() :)

Related Questions

Sponsored Content

10 Answered Questions

[SOLVED] TypeError: $.ajax(...) is not a function?

  • 2013-08-16 10:31:35
  • ReactingToAngularVues
  • 279101 View
  • 191 Score
  • 10 Answer
  • Tags:   jquery ajax json

20 Answered Questions

[SOLVED] Wait until all jQuery Ajax requests are done?

14 Answered Questions

32 Answered Questions

[SOLVED] How to manage a redirect request after a jQuery Ajax call

24 Answered Questions

[SOLVED] jQuery Ajax File Upload

19 Answered Questions

[SOLVED] jQuery AJAX submit form

17 Answered Questions

13 Answered Questions

[SOLVED] How to find elements by class

17 Answered Questions

[SOLVED] Abort Ajax requests using jQuery

24 Answered Questions

[SOLVED] Is Safari on iOS 6 caching $.ajax results?

Sponsored Content