Why is my JQuery selector returning a n fn init 0 and what is it

Question

I have a set of dynamically generated checkboxes  where each of them has a data-id attribute corresponding to a database integer id  When i populate my html-form with an object to edit  there is a list of integers representing which checkboxes should be checked  The checkboxes are wrapped in a div with class checkbox-wrapper   So html looks like this    lt div class  checkbox-wrapper  gt       lt input type  checkbox  id  checkbox1  data-id  1  gt       lt label for  checkbox1  gt Checkbox 1 lt  label gt   lt  div gt   lt div class  checkbox-wrapper  gt       lt input type  checkbox  id  checkbox2  data-id  2  gt       lt label for  checkbox2  gt Checkbox 2 lt  label gt   lt  div gt   lt div class  checkbox-wrapper  gt       lt input type  checkbox  id  checkbox3  data-id  99  gt       lt label for  checkbox3  gt Checkbox 99 lt  label gt   lt  div gt    Note that the id runs on auto increment index numbers  while data-id might have a different id value  I want to select them by data-id   Now  using JQuery  I know I can select the relevant checkboxes like this       checkbox-wrapper gt input data-id  99          checkbox-wrapper gt input data-id  1        This works in my console  in chrome  and it returns the relevant DOM-element  Likewise  this below  sets the checkboxes to checked       checkbox-wrapper gt input data-id  99     prop  checked    checked        checkbox-wrapper gt input data-id  1     prop  checked    checked      However  if I iterate through a list of integers in my javascript code  not directly in the console   and log the returned elements  based on the id values  I get some weird results   var ids    1 2    each ids  function index  myID       console log     checkbox-wrapper gt input data-id    myID                 checkbox-wrapper gt input data-id    myID       prop  checked    checked               First of all  no checkboxes are checked  Second  my console prints strange results   n fn init 0      context  document     length  0     prevObject  n fn init 1      selector    checkbox-wrapper gt input data-id  1          proto    n 0   n fn init 0      context  document     length  0     prevObject  n fn init 1      selector    checkbox-wrapper gt input data-id  2          proto    n 0    The printed selector Strings seems perfect  The exact same selectors returns the DOM-elements  when written directly into the chrome console  Then they return objects like this     lt input type   checkbox  id   checkbox1  data-id   1  gt      What is the n fn init 0   and why it is returned  Why are my two seemingly identical JQuery functions returning different things

User · Answer

I just want to add something to these great answers. If your DOM element ins't loading in time. You can still set the value.

let Ctrl = $('#mySelectElement'); ... Ctrl.attr('value', myValue);

after that most DOM elements that accept a value attribute should populate correctly.

User · Answer

Your result object is a jQuery element  not a javascript array  The array you wish must be under  get       As the return value is a jQuery object  which contains an array  it s   very common to call  get   on the result to work with a basic array    http   api jquery com map

User · Answer

Error is that you are using  ID  in lower case like  checkbox1  but when you loop json object its return in upper case  So you need to replace checkbox1 to CHECKBOX1     In my case  -   var response   jQuery parseJSON response      each response  function key  value         each value  function key  value                 key  val value                Before     lt input type  text  name  abc  id  abc  value    gt    I am getting the same error but when i replace the id in html code its work fine   After   lt input type  text  name  abc  id  ABC  value    gt

User · Answer

I faced this issue because my selector was depend on id meanwhile I did not set id for my element  my selector was       EmployeeName     but my HTML element   lt input type  text  name  EmployeeName  gt       so just make sure that your selector criteria are valid

User · Answer

Here is how to do a quick check to see if n fn init 0  is caused by your DOM-elements not loading in time  Delay your selector function by wrapping it in setTimeout function like this   function timeout             your selector function that returns n fn init 0  goes here        setTimeout timeout  5000    This will cause your selector function to execute with a 5 second delay  which should be enough for pretty much anything to load   This is just a coarse hack to check if DOM is ready for your selector function or not  This is not a  permanent  solution    The preferred ways to check if the DOM is loaded before executing your function are as follows   1  Wrap your selector function in    document  ready function         your selector function          2  If that doesn t work  use DOMContentLoaded  3  Try window onload  which waits for all the images to load first  so its least preferred  window onload   function           your selector function         4  If you are waiting for a library to load that loads in several steps or has some sort of delay of its own  then you might need some complicated custom solution  This is what happened to me with  MathJax  library  This question discusses how to check when MathJax library loaded its DOM elements  if it is of any help   5  Finally  you can stick with hard-coded setTimeout function  making it maybe 1-3 seconds  This is actually the very least preferred method in my opinion   This list of fixes is probably far from perfect so everyone is welcome to edit it

User · Answer

Another approach Inside of  function to asure that the each is executed on document ready    var ids    1 2     function          checkbox-wrapper gt input type  checkbox     each function i item       if ids indexOf   item  data  id     gt  -1            item  prop  checked    checked                      Working fiddle  https   jsfiddle net robertrozas w5uda72v      What is the n fn init 0   and why it is returned  Why are my two seemingly identical JQuery functions returning different things       Answer  It seems that your elements are not in the DOM yet  when you are trying to find them  As  Rory McCrossan pointed out  the length 0 means that it doesn t find any element based on your search criteria    About n fn init 0   lets look at the core of the Jquery Library   var jQuery   function  selector  context        return new jQuery fn init  selector  context         Looks familiar  right   now in a minified version of jquery  this should looks like   var n   function  selector  context        return new n fn init  selector  context            So when you use a selector you are creating an instance of the jquery function  when found an element based on the selector criteria it returns the matched elements  when the criteria does not match anything it returns the prototype object of the function

[jquery] Why is my JQuery selector returning a n.fn.init[0], and what is it?

Examples related to jquery

Examples related to jquery-selectors