为什么我的JQuery选择器返回n.fn.init [0]，这是什么? [英] Why is my JQuery selector returning a n.fn.init[0], and what is it?

问题描述

我有一组动态生成的复选框，其中每个复选框都有一个与数据库整数ID对应的data-id属性.当我用要编辑的对象填充html表单时，有一个整数列表，该整数表示应选中的复选框.复选框包装在div中，类为checkbox-wrapper.

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.

所以html看起来像这样:

So html looks like this:

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

请注意，id在自动增量索引号上运行，而data-id可能具有不同的id值.我想通过data-id选择它们.

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.

现在，使用JQuery，我知道可以选择如下相关复选框:

Now, using JQuery, I know I can select the relevant checkboxes like this:

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

这可以在我的控制台中以chrome浏览，并返回相关的DOM元素.同样，下面将复选框设置为选中:

This works in my console, in chrome, and it returns the relevant DOM-element. Likewise, this below, sets the checkboxes to checked:

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

但是，如果我遍历我的javascript代码中的整数列表(而不是直接在控制台中)，并根据id值记录返回的元素，则会得到一些奇怪的结果:

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>input[data-id='"+myID+"']"));
    $(".checkbox-wrapper>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>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]

打印的选择器Strings看起来很完美.当直接写入chrome控制台时，与选择器完全相同的选择器将返回DOM元素.然后他们返回这样的对象:

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:

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

n.fn.init [0]是什么，为什么返回它?为什么我的两个看似相同的JQuery函数返回不同的东西?

What is the n.fn.init[0], and why it is returned? Why are my two seemingly identical JQuery functions returning different things?

推荐答案

另一种方法(在$function内部以确保each在document ready上执行):

Another approach(Inside of $function to asure that the each is executed on 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");
    }
  });
});

正在工作的小提琴: https://jsfiddle.net/robertrozas/w5uda72v/

n.fn.init [0]是什么，为什么返回它?为什么我的两个看似相同的JQuery函数返回不同的东西?

What is the n.fn.init[0], and why it is returned? Why are my two seemingly identical JQuery functions returning different things?

答案:当您尝试查找元素时，您的元素似乎尚未在DOM中.正如@Rory McCrossan指出的那样，length:0表示它无法根据您的搜索条件找到任何元素.

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.

关于n.fn.init[0]，让我们看一下Jquery库的核心:

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 );
};

因此，当您使用选择器时，您正在创建jquery函数的实例；当根据选择器标准找到一个元素时，它返回匹配的元素；当条件不符合任何条件时，它将返回该函数的原型对象.

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选择器返回n.fn.init [0]，这是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！