Jquery find does not get invalid elements

Question

I have this div inside my page;

<div class="workspace" id="workspace"> <div data-ng-repeat="node in controller.Nodes" on-last-repeat=on-last-repeat> </div> </div> 

In my typescript code, I have this to check if there are any required fields that are not set.

 if ($('#workspace').find('.ng-invalid').length != 0) 

This does not work. The length is always 0. I also tried the following below, but no luck:

 if ($('#workspace').find('.has-error.form-control').length != 0) if ($('#workspace').find('.invalid').length != 0) 

Any ideas?

Answer 1

the child does not have a class attribute. You can use has attribute selector :

 if ($('#workspace').find('[data-ng-repeat]').length != 0) 

Answer 2

Is this possible because you are running the jQuery part before the document is completely ready?

I have an example:

 if ($('#workspace .ng-invalid').length != 0) { console.log('found in FIRST'); } // on document.ready $(function() { if ($('#workspace .ng-invalid').length != 0) { console.log('found in SECOND'); } }); 

and only the second trigger.

To iterate over all invalid elements using jQuery, use each(index, object) :

 $(function() { $('#workspace .ng-invalid').each( function (index, object) { console.log(object); }); });