为什么我的 JQuery 选择器返回 n.fn.init[0]，它是什么？答案

【问题标题】：Why is my JQuery selector returning a n.fn.init[0], and what is it?为什么我的 JQuery 选择器返回 n.fn.init[0]，它是什么？
【发布时间】：2016-04-02 09:11:00
【问题描述】：

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

所以 html 看起来像这样：

<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 选择它们。

现在，使用 JQuery，我知道我可以像这样选择相关的复选框：

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

这适用于我的控制台，在 chrome 中，它返回相关的 DOM 元素。同样，下面的这将复选框设置为选中：

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

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

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

首先，没有选中任何复选框。其次，我的控制台打印出奇怪的结果：

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]

打印出来的选择器字符串看起来很完美。当直接写入 chrome 控制台时，完全相同的选择器返回 DOM 元素。然后他们返回这样的对象：

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

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

【问题讨论】：

您在控制台中看到的“奇怪”结果是 jQuery 对象本身。您还可以看到length 属性为0，这意味着从您提供的选择器中找不到该元素，因此使用prop() 无效。正如您在this example 中看到的那样，您的代码正如您所描述的那样有效。这意味着您需要检查控制台代码中其他地方的错误。问题可能是您没有正确包含 jQuery 库，或者您在 DOM 准备好之前运行代码。
很可能是最后一个。我的复选框是根据动态数据创建的。生成checkbox-html，并通过一个方法添加到文档中，每次更改日期选择器时都会调用该方法，即在加载对象以填充表单时调用该方法。换句话说，就在检查要检查的复选框之前。它是通过触发changeDate-event 来完成的，我认为它不会停止我的填充方法的执行，直到它完成创建复选框 DOM 元素。 @RoryMcCrossan，您的评论实际上是对我问题的完整回答。你应该把它写下来作为答案。
鉴于，它并没有解决我的问题，但它完美地回答了这个问题，让我有机会继续前进，并调查下一步。不过，我还有任何其他问题更适合提出新问题。
.prop("checked", "checked") 应该是.prop("checked", true)
（这就是我将其作为评论而不是答案提交的原因。）您是否在页面完全加载后运行代码？如果没有，则不会加载 DOM，也不会匹配任何选择器。

标签： jquery jquery-selectors

【解决方案1】：

另一种方法（在$function 内部确保each 在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 函数返回不同的东西？

Answer: 当你试图找到它们时，你的元素似乎还没有在 DOM 中。正如@Rory McCrossan 指出的那样，length:0 意味着它没有根据您的搜索条件找到任何元素。

关于`n.fn.init[0]`，我们来看一下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 );
};

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

【讨论】：

虽然它可能是很棒的代码，但这并不能回答我问题的任何部分。它也不会解决任何问题，因为在尝试填充它们时，我的复选框似乎还没有准备好。意思是，这个方法将迭代恰好零个 DOM 元素。
您是否使用 ajax 或其他东西创建这些复选框？？...如果您单击小提琴，它的工作原理和复选框会被选中...。也许如果您发布您的代码的那部分我们可以更好地帮助您。
@KjetilNordin，我这样做不是为了代表，我这样做是为了帮助他人，所以不要担心。也许这个答案对其他人有用，所以我不会删除它，点数不重要。正如你所说：它看起来像一个很棒的代码 xD。
我吃我的话！你刚刚与我分享了多么棒的资源，jsperf.com。我不知道那个。我将来可能会经常使用它。想一想，这是有道理的，因为您只执行一次 jquery 选择，虽然有更多的遍历，但它似乎对资源的要求更少。你我的朋友，给我上了一课:)。谢谢！
答案已编辑...从小开始，然后长大一点:)

【解决方案2】：

这里是如何快速检查n.fn.init[0] 是否是由于您的 DOM 元素未及时加载造成的。通过将选择器函数包装在 setTimeout 函数中来延迟选择器函数，如下所示：

function timeout(){ 

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

}

setTimeout(timeout, 5000)

这将导致您的选择器函数延迟 5 秒执行，这应该足以加载几乎所有内容。

这只是一个粗略的 hack，用于检查 DOM 是否已为您的选择器功能做好准备。这不是（永久）解决方案。

在执行函数之前检查 DOM 是否已加载的首选方法如下：

1) 将选择器函数包装在

$(document).ready(function(){  ... your selector function...  };

2) 如果这不起作用，请使用DOMContentLoaded

3)试试window.onload，它会等待所有图片首先加载，所以它最不受欢迎

window.onload = function () {  ... your selector function...  }

4) 如果您正在等待一个库在几个步骤中加载或有某种延迟，那么您可能需要一些复杂的自定义解决方案。这就是“MathJax”库发生在我身上的事情。 This question 讨论了如何检查 MathJax 库何时加载其 DOM 元素，如果有帮助的话。

5) 最后，您可以坚持使用硬编码的setTimeout 函数，使其可能需要1-3 秒。在我看来，这实际上是最不受欢迎的方法。

此修复列表可能远非完美，因此欢迎大家进行编辑。

【讨论】：

【解决方案3】：

我遇到了这个问题，因为我的选择器依赖于id 同时I did not set id for my element

我的selector 是

$("#EmployeeName")

但我的HTML element

<input type="text" name="EmployeeName">

所以只要确保你的选择器标准是有效的

【讨论】：

...意味着如果您控制台打印一个 jquery 选择函数，则返回 n.fn.init[0]，该函数不返回匹配的元素。可能是时间安排，也可能是错误的选择字符串。我认为这增加了回答问题标题的完整性。 +1

【解决方案4】：

错误是您使用小写的“ID”，例如“checkbox1”，但是当您循环 json 对象时，它以大写形式返回。所以需要把checkbox1换成CHECKBOX1。

就我而言：-

var response = jQuery.parseJSON(response);

$.each(response, function(key, value) {
   $.each(value, function(key, value){
        $('#'+key).val(value);
   });
});

之前

  <input type="text" name="abc" id="abc" value="">

我遇到了同样的错误，但是当我在 html 代码中替换 id 时它工作正常。

之后

<input type="text" name="abc" id="ABC" value="">

【讨论】：

“当你循环 json 对象时，它以大写形式返回”这是不正确的。另外，这个问题与json没有任何关系。
正如 Nikolaj 所说，即使您遇到类似的错误消息，这与这个特定问题并不真正相关。实际上，这不仅无关紧要，而且答案实际上是完全错误的，因为我的问题与字符大小写无关。

【解决方案5】：

您的结果对象是一个 jQuery 元素，而不是一个 javascript 数组。您希望的数组必须在 .get()

下

由于返回值是一个jQuery对象，其中包含一个数组，它是在结果上调用 .get() 以使用基本数组非常常见。 http://api.jquery.com/map/

【讨论】：

【解决方案6】：

我只想为这些出色的答案添加一些内容。如果您的 DOM 元素没有及时加载。您仍然可以设置该值。

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

之后大多数接受值属性的DOM元素应该正确填充。

【讨论】：

工作小提琴：https://jsfiddle.net/robertrozas/w5uda72v/

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

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