如何使用 jQuery 选择器访问实际的 DIV？答案

【问题标题】：how do I access the actual DIV with a jQuery selector?如何使用 jQuery 选择器访问实际的 DIV？
【发布时间】：2012-10-20 07:29:09
【问题描述】：

我有一个动态填充其他 div 的 div...

<div id="wrapper">

</div>

//javascript 
 for(//a bunch of times){
  var d = document.cloneNode('divModel');
  d.foo = {//bunch of stuff };
  document.getChildById('wrapper').appendChild(d) is applied later to fill in child divs
}

现在我想循环遍历 wrapper 的子节点并使用该 foo.

当我通过普通的 javascript 执行此操作时

document.getElementById('wrapper').childNodes[x].foo

效果如我所料

然而

$('#wrapper').each(function (i, element){
      console.log(element.foo); //foo here is undefined
})

导致一堆未定义的

所以...我猜 jQuery 实际上是在处理我的 div 的一些内部包装，而不是直接处理 div。我很好奇如何（或者如果可能的话）我可以访问这个循环中的实际 div 以便访问我的自定义 foo。

编辑根据您迄今为止的所有回答（非常感谢您的时间），我觉得我需要澄清一下，因为每个人似乎都错过了我的实际问题...... 我已将上面的代码修改为更明确。

我没有语法错误（在我的实际代码中）。 jQuery 正确循环通过包装子级，它只是不返回实际子级（div），而是返回它们自己的版本，并且这个自定义版本不包含我附加的 foo。

所以，我需要的是能够返回到实际的 dom 对象，而不是围绕它的 jQuery 包装器。这可能吗？

【问题讨论】：

$('#wrapper') 是正确的选择器。 # 表示 id。 jQuery 使用sizzle 作为它的选择器，它只是利用了css standards。您将在 jQuery 中使用与 CSS 中相同的选择器（大部分情况下）。
我不确定您的其余代码是否有效，但 CSS 选择器应该是 #wrapper
使用$('#wrapper').children().each(
getChildById?你的意思是 document.getElementById... 也试试 element.attr("foo");

标签： javascript jquery html

【解决方案1】：

您忘记了孩子（以及提到的“#”）：

$('#wrapper').children().each(function (i, element)...

【讨论】：

我编辑了我的问题以澄清。问题不在于循环......它是缺少的属性。

【解决方案2】：

你是对的，只是选择器关闭了。你需要$("#wrapper")。

$("#wrapper").each(function(i,e) { console.log(e.id) });

编辑

确认可以从 DOM 元素中取回对象...

var c = document.getElementById('container');
var el = document.createElement('div');
el.id = 'new';
el.innerText='the test element';
el.test = { hello: "world" };
c.appendChild(el);
console.log('javascript: ' + document.getElementById('new').test.hello);
$("#container div").each(function(i,e) {
    if (e.test) console.log('jquery: ' + e.test.hello);
});

http://jsfiddle.net/eeYHr/3/

【讨论】：

我就是这样做的。问题是，当我查看 e 是什么时，它不是实际的子 div，它是围绕该子 div 的 jQuery 包装器，它恰好不包含附加到该子 div (foo) 的自定义对象。 foo 不是属性，因此它不会出现在 attr() 方法响应中。这是一个完整的对象，我在构造它时将它附加到 div 上。所以，我需要的是能够回到实际的 dom 对象，而不是它周围的 jQuery 包装器。这可能吗？
@Dr.Dredel 我刚刚尝试了一个测试，使用document.createElement 附加了一个元素并向其中添加了一个 JSON 对象。使用$.each 进行迭代时，我可以看到该对象。你确定没有其他事情发生吗？
不...不确定，但我没有看到任何错误，在我的代码中...但是，如果您确定 $.each 公开本机对象和任何内容附在它上面，那我想我一定是。
@Dr.Dredel 我很确定它一定是......这是我的测试：jsfiddle.net/eeYHr/3
仍然不确定我在做什么不同，但显然我搞砸了......非常感谢。

【解决方案3】：

给你一些选择：

$('#wrapper').children().each(function (i, element) { ... });

$('#wrapper > *').each(function (i, element) { ... });

【讨论】：

【解决方案4】：

或者更明确地说，正如您所说，您只专注于子 DIV：

$('#wrapper div').each( function() {
    // do some funky stuff
    alert($(this).attr('id')); // displays element ID
});

进一步的学习，也请参考这个JQuery帮助页面：

http://api.jquery.com/category/selectors/basic-css-selectors/

【讨论】：