Pourquoi mon sélecteur JQuery retour a n.fn.init[0], et quel est-il?

J'ai un ensemble de généré dynamiquement, cases à cocher, où chacun d'eux a un data-id attribut correspondant à une base de données d'identification entier. Quand je remplir mon html-forme avec un objet pour le modifier, il ya une liste d'entiers représentant les cases à cocher qui doit être vérifié. Les cases sont enveloppés dans un div avec classe checkbox-wrapper.

Donc html ressemble à ceci:

<div class="checkbox-wrapper">
    <input type="checkbox" id="checkbox1" data-id="1">
    <label for="checkbox1">Checkbox 1</label>
</div>
<div class="checkbox-wrapper">
    <input type="checkbox" id="checkbox2" data-id="2">
    <label for="checkbox2">Checkbox 2</label>
</div>
<div class="checkbox-wrapper">
    <input type="checkbox" id="checkbox3" data-id="99">
    <label for="checkbox3">Checkbox 99</label>
</div>

Note que le code s'exécute sur l'auto incrémentation des numéros d'index, alors que les données-id peut avoir un id différent de la valeur. Je tiens à les sélectionner par data-id.

Maintenant, à l'aide de JQuery, je sais que je peux sélectionner les cases correspondantes comme ceci:

$(".checkbox-wrapper>input[data-id='99']");
$(".checkbox-wrapper>input[data-id='1']");

Cela fonctionne dans ma console, en chrome, et il retourne pertinentes DOM-élément. De même, ci-dessous, définit les cases à coché:

$(".checkbox-wrapper>input[data-id='99']").prop("checked", "checked");
$(".checkbox-wrapper>input[data-id='1']").prop("checked", "checked");

Cependant, si je itérer sur une liste d'entiers dans mon code javascript (pas directement dans la console), et de connecter les éléments retournés, basé sur les valeurs d'id, j'obtiens des résultats étranges:

var ids = [1,2]
$.each(ids, function(index, myID){
    console.log($(".checkbox-wrapper>input[data-id='"+myID+"']"));
    $(".checkbox-wrapper>input[data-id='"+myID+"']").prop("checked", "checked");    
});

Tout d'abord, aucune des cases sont cochées. Deuxièmement, ma console imprime des résultats étranges:

n.fn.init[0]
    context: document
    length: 0
    prevObject: n.fn.init[1]
    selector: ".checkbox-wrapper>input[data-id='1']"
    __proto__: n[0]

n.fn.init[0]
    context: document
    length: 0
    prevObject: n.fn.init[1]
    selector: ".checkbox-wrapper>input[data-id='2']"
    __proto__: n[0]

L'imprimé sélecteur de Cordes semble parfait. Exactement la même sélecteurs renvoie les DOM-éléments, de les écrire directement dans la console chromée. Puis ils retournent des objets comme ceci:

[<input type="checkbox" id="checkbox1" data-id="1">]

Qu'est-ce que le n de.fn.init[0], et pourquoi il est revenu? Pourquoi mes deux apparemment identiques fonctions JQuery retour des choses différentes?

Le "étrange" résultat que vous voyez dans la console c'est l'objet jQuery lui-même. Vous pouvez aussi voir que le length propriété est 0, ce qui signifie que l'élément n'est pas trouvé dans le sélecteur vous avez fourni, d'où l'utilisation de prop() n'a aucun effet. Comme vous pouvez le voir dans cet exemple votre code comme vous l'avez décrit, il fonctionne. Cela signifie que vous avez besoin de vérifier la console d'erreurs, d'ailleurs dans votre code. Le problème pourrait être que vous n'avez pas compris la bibliothèque jQuery correctement, ou que vous êtes en cours d'exécution de votre code avant que le DOM est prêt.
Probablement le dernier. Mes cases sont créés à partir de données dynamiques. La case à cocher en-html est généré et ajouté au document par le biais d'une méthode, qui est appelée chaque fois qu'un datepicker est changé, c'est lors du chargement de l'objet pour remplir le formulaire. En d'autres termes, juste avant la vérification qui a des cases à cocher. Il est fait par le déclenchement d'une changeDate-événement, je ne pense pas que s'arrête l'exécution de ma population de la méthode, jusqu'à ce qu'il se fait de la création de la case DOM-éléments. @RoryMcCrossan, votre commentaire est en fait une réponse à ma question. Vous devriez écrire une réponse.
Donné, ça ne résout pas mon problème, mais il répond à la question parfaitement, et me donne une chance de passer, et enquêter sur la prochaine étape. D'autres questions que j'ai le plus approprié pour une nouvelle question.
.prop("checked", "checked") devrait être .prop("checked", true)
vous avez raison, mais il n'a pas vraiment d'importance à cette question, n'est ce pas? ref: stackoverflow.com/questions/10650233/...
(C'est pourquoi j'ai présenté comme un commentaire et non une réponse.) Vous exécutez votre code lorsque la page est complètement chargée? Si non, les DOM ne sera pas chargé et pas de sélecteurs va correspondre à quoi que ce soit.
Mon commentaire précédent sera répondre à votre question parfaitement

InformationsquelleAutor KjetilNordin | 2015-12-28

jquery jquery-selectors

25

Une autre approche(à l'Intérieur de $function à asure que le each est exécuté sur document ready):
```
var ids = [1,2];
$(function(){
  $('.checkbox-wrapper>input[type="checkbox"]').each(function(i,item){
    if(ids.indexOf($(item).data('id')) > -1){
       $(item).prop("checked", "checked");
    }
  });
});
```
De travail violon: https://jsfiddle.net/robertrozas/w5uda72v/

Qu'est-ce que le n de.fn.init[0], et pourquoi il est revenu? Pourquoi mes deux apparemment identiques fonctions JQuery retour des choses différentes?

Réponse: Il semble que les éléments ne sont pas dans les DOM pourtant, quand vous êtes à essayer de les trouver. Comme @Rory McCrossan souligné, le length:0 signifie qu'il ne trouve aucun élément en fonction de vos critères de recherche.

Sur n.fn.init[0], permet de regarder le noyau de la Bibliothèque Jquery:
```
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 );
};
```
Ainsi, lorsque vous utilisez un sélecteur vous créez une instance de la fonction jquery; une fois trouvé un élément basé sur le sélecteur de critères qu'il renvoie les éléments qui correspondent; lorsque les critères ne correspondent pas du tout ce à quoi elle renvoie l'objet prototype de la fonction.
- Alors qu'il pourrait être grande de code, ce n'est pas la réponse à une partie de ma question. Aussi, Il ne serait pas résoudre quoi que ce soit, car il semble que mes cases à cocher ne sont pas prêts au moment de l'essayer afin de les remplir. Sens, cette méthode d'itération sur exactement zéro DOM-éléments.
- Êtes-vous de la création de ces cases à cocher avec ajax ou quelque chose??...si vous cliquez sur le violon, de ses œuvres et les cases sont cochées....Peut-être que si vous postez qu'une partie de votre code, nous pouvons vous aider dans une meilleure façon.
- je ne fais pas ça pour la rep, je suis en train de faire pour aider les autres, ne vous inquiétez pas. Peut-être que cette réponse sert les autres, donc je ne vais pas le supprimer, les points ne pas mathers. Et comme vous l'avez dit: il ressemble à un grand code xD.
- Hehe, merci. Votre nature est la raison pour laquelle j'aime ce réseau. Je dois dire que je n'ai pas fait appel de ce code. Je viens de remarquer que même si c'était super code, il n'était pas de répondre à la question. Dans mon esprit, il semble effectivement un peu plus lent que mon code actuel, comme vous itérer sur chaque case, et pour chacun d'eux vérifie si l'id existe dans un tableau. Je ne peux pas le dire, mais mon sentiment est que ma méthode est plus rapide, et tout aussi facile à lire. De toute façon, mon spécifiques manière de construire les cases à cocher est toujours préférable de laisser pour une autre question. Il y a beaucoup de code.
- Il semble que le mien est un peu plus rapide jsperf.com/perf-checkboxes-so
- Je mange mes mots! Et ce d'une grande ressource que vous venez de partagé avec moi, avec jsperf.com. Je ne connaissais pas celui-là. Je vais probablement l'utiliser à l'avenir. Venez pour penser à elle, Il est logique, tant que vous n'effectuez qu'un seul jquery sélectionner, et bien qu'il n'y a déplacement de plus, il semble être de façon moins exigeantes en ressources. Toi, mon ami, ont taought moi une leçon :). Merci!!!!
- ...Si vous voulez ajouter une petite ligne sur ce que le n de.fn.init[0]-objet est, je vous marquez votre réponse acceptée. De cette façon, il espère être utile à d'autres dans le futur!
- Réponse édité...commencer petit et de grandir un peu 🙂
- Maintenant, votre réponse est incroyable! 🙂
InformationsquelleAutor Hackerman
6

Ici, c'est comment faire une vérification rapide pour voir si n.fn.init[0] est causée par votre DOM-éléments qui ne se chargent pas dans le temps. Retarder votre sélecteur de fonction en l'enveloppant dans setTimeout fonction comme ceci:
```
function timeout(){ 

    ...your selector function that returns n.fn.init[0] goes here...

}

setTimeout(timeout, 5000)
```
Ce sera la cause de votre sélecteur de fonction à exécuter avec un retard de 5 secondes, ce qui devrait être suffisant pour beaucoup de choses à charger.

C'est juste un gros hack pour vérifier si DOM est prêt pour votre sélecteur de fonction ou pas. Ce n'est pas un (permanente) de la solution.

Les moyens privilégiés pour vérifier si le DOM est chargé avant l'exécution de votre fonction sont les suivantes:

1) Envelopper votre sélecteur de fonction en
```
$(document).ready(function(){  ... your selector function...  };
```
2) Si cela ne fonctionne pas, utilisez DOMContentLoaded

3) Essayer de la fenêtre.onload, qui attend toutes les images à charger en premier, de sorte que son la moins préférée
```
window.onload = function () {  ... your selector function...  }
```
4) Si vous êtes en attente pour une bibliothèque à la charge de qui se charge en plusieurs étapes ou a une sorte de retard de son propre chef, alors vous pourriez avoir besoin de certains compliqué solution personnalisée. C'est ce qui m'est arrivé avec "MathJax" de la bibliothèque. Cette question explique comment vérifier lors de MathJax bibliothèque chargée de ses éléments DOM, si elle est d'aucun secours.

5) Enfin, vous pouvez coller avec codée en dur setTimeout fonction, rendant peut-être de 1 à 3 secondes. C'est en fait le moins privilégiées de la méthode, à mon avis.

Cette liste de correctifs est probablement loin d'être parfait afin de toute personne est la bienvenue pour le modifier.

InformationsquelleAutor Arthur Tarasov
4

J'ai fait face à ce problème parce que mon sélecteur était dépendent id pendant ce temps I did not set id for my element

mon selector était
```
$("#EmployeeName")
```
mais mon HTML element
```
<input type="text" name="EmployeeName">
```
donc, assurez-vous que votre sélecteur de critères sont valables
- ...ce qui signifie que le n de.fn.init[0] est renvoyée si la console d'impression jquery sélection de la fonction, qui renvoie aucun élément correspondant. Il pourrait être à la fois le timing, ou d'un mauvais choix de la chaîne. Je pense que cela ajoute à l'exhaustivité de la réponse à l'intitulé de la question. +1
InformationsquelleAutor Basheer AL-MOMANI
2

Votre objet de résultat est un élément jQuery, pas un tableau javascript. Le tableau que vous souhaitez doit être l'objet .get()

Que la valeur de retour est un objet jQuery, qui contient un tableau, c'est
très courant à l'appel .get() sur le résultat de travailler avec une base de tableau.
http://api.jquery.com/map/

InformationsquelleAutor celerno
1

Je veux juste ajouter quelque chose à ces réponses. Si votre DOM élément ins pas de chargement dans le temps. Vous pouvez toujours définir la valeur.

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

après que plus DOM éléments qui acceptent une valeur d'attribut doit remplir correctement.

InformationsquelleAutor Train
-2

Erreur, c'est que vous êtes en utilisant 'ID' en minuscule comme "checkbox1", mais lorsque vous boucle objet json son retour en majuscules. Si vous avez besoin de remplacer "checkbox1" à "CHECKBOX1".

Dans mon cas :-
```
var response = jQuery.parseJSON(response);

$.each(response, function(key, value) {
   $.each(value, function(key, value){
        $('#'+key).val(value);
   });
});
```
Avant
```
  <input type="text" name="abc" id="abc" value="">
```
J'obtiens le même message d'erreur mais lorsque je remplace l'id dans le code html de son beau travail.

Après
```
<input type="text" name="abc" id="ABC" value="">
```
- "lorsque vous boucle objet json son retour en majuscules" c'est incorrect. Aussi, la question n'avons rien à voir avec json.
- Comme Nikolaj dit, ce n'est pas vraiment pertinent pour cette question en particulier, même si vous avez rencontré un message d'erreur similaire. En fait, il est non seulement hors de propos, la réponse est en fait simplement faux, car mon problème n'a rien à voir avec le caractère boîtier.
InformationsquelleAutor Subhan Raza

Vous devez vous connecter pour publier un commentaire.

De travail violon: https://jsfiddle.net/robertrozas/w5uda72v/

Sur n.fn.init[0], permet de regarder le noyau de la Bibliothèque Jquery:

Sur `n.fn.init[0]`, permet de regarder le noyau de la Bibliothèque Jquery: