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

问题描述 投票：0回答：6

我有一组动态生成的复选框，其中每个复选框都有一个与数据库整数 id 相对应的 

data-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 jquery-selectors
6个回答
36
投票

另一种方法（在

$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 函数返回不同的东西？

答案：当你试图找到你的元素时，它们似乎还没有在 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 look like:

var n = function( selector, context ) {
   return new n.fn.init( selector, context );
};

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

7
投票

以下是如何快速检查 

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”库中发生的事情。 这个问题讨论了如何检查MathJax库何时加载其DOM元素，如果有任何帮助的话。

5) 最后，您可以坚持使用硬编码的 

setTimeout
函数，使其可能需要 1-3 秒。在我看来，这实际上是最不受欢迎的方法。

此修复列表可能远非完美，因此欢迎每个人对其进行编辑。

7
投票

你的结果对象是一个 jQuery 元素，而不是一个 javascript 数组。您想要的数组必须位于 .get() 下

由于返回值是一个 jQuery 对象，其中包含一个数组，因此 对结果调用 .get() 来处理基本数组是很常见的。 http://api.jquery.com/map/

5
投票

我遇到这个问题是因为我的选择器同时依赖于

id
I did not set id for my element

我的

selector
是

$("#EmployeeName")

但是我的

HTML element

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

所以只需确保您的选择标准有效

2
投票

我只是想为这些精彩的答案添加一些内容。如果您的 

DOM
元素未及时加载。您仍然可以设置该值。

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

之后，接受 value 属性的 most 

DOM
元素应该正确填充。

-3
投票

错误是您使用小写的“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="">
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.