Javascript jQuery 查找每个子节点并访问子子节点
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8370127/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery find, each, children and accessing sub-children
提问by garlicman
I've been getting a bit frustrated with jQuery on a demo I'm slapping together and was wondering if the following is just a limitation of jQuery's selector and search methods, or I'm just using it wrong.
我在一个演示中对 jQuery 感到有点沮丧，我想知道以下是否只是 jQuery 选择器和搜索方法的限制，或者我只是使用错误。
Here's an example HTML block:
这是一个示例 HTML 块：
<div class='div_item'>
<td class='list'>
<dl><dt class="access_text">Div1 text1</dt></dl>
<dl><dt class="access_text">Div1 text2</dt></dl>
<dl><dt class="access_text">Div1 text3</dt></dl>
</td>
</div>
<div class='div_item'>
<td class='list'>
<dl><dt class="access_text">Div2 text1</dt></dl>
<dl><dt class="access_text">Div2 text2</dt></dl>
<dl><dt class="access_text">Div2 text3</dt></dl>
</td>
</div>
Here's the jQuery 1.9.2 script:
这是 jQuery 1.9.2 脚本：
$().ready(function(){
$('.div_item'); // this is a 2 jQuery array, with no children
$('.div_item').find('.access_text'); // This is empty, length 0, .div_item's children aren't populated. Like I was using .children()
$('.div_item').find('.access_text').each(function() { // This doesn't work because the .div_item children aren't populated?
alert($(this).innerText);
}):
});
My question is, is there a reason why are the children in the $('.div_item')array objects not populated? If they're not populated, they can't be referenced, then can't be .find()'ed for properly. This is where I think my usage is the problem.
我的问题是，是否有原因$('.div_item')未填充数组对象中的孩子？如果它们没有被填充，它们就不能被引用，也不能被.find()正确地编辑。这就是我认为我的用法有问题的地方。
All the suggestions I've seen so far work for a flatter DOM. e.g. <div class='div_item'><dt class="access_text"></dt></div>, but not for something that's further nested.
到目前为止，我所看到的所有建议都适用于更平坦的 DOM。例如<div class='div_item'><dt class="access_text"></dt></div>，但不适用于进一步嵌套的内容。
采纳答案by garlicman
Ok!!! If anyone is curious and thought I've been crazy all this time, try testing it yourself. The above jQuery + the updated HTML sample WITH wrapping tags!
好的！！！如果有人好奇并认为我一直疯了，请尝试自己测试。上面的 jQuery + 带有包装标签的更新 HTML 示例！
I was testing the divs within a table and it probably found a gap in the DOM parsing. I know that div's aren't supposed to be inserted in between and it's elements, but I never expected it to surprise me like this!
我正在测试表中的 div，它可能在 DOM 解析中发现了一个空白。我知道 div 不应该插入在它的元素之间，但我没想到它会像这样让我感到惊讶！
Here's the bad html that's fail the jQuery find: (no child elements)
这是 jQuery 发现失败的糟糕 html：（没有子元素）
<table>
<div class='div_item'>
<tr>
<td class='list'>
<dl><dt class="access_text">Div1 text1</dt></dl>
<dl><dt class="access_text">Div1 text2</dt></dl>
<dl><dt class="access_text">Div1 text3</dt></dl>
</td>
</tr>
</div>
</table>
Here's how I adjusted it to work with jQuery:
这是我调整它以与 jQuery 一起使用的方法：
<table>
<tr class='div_item'>
<td class='list'>
<dl><dt class="access_text">Div1 text1</dt></dl>
<dl><dt class="access_text">Div1 text2</dt></dl>
<dl><dt class="access_text">Div1 text3</dt></dl>
</td>
</tr>
</table>
The tr class is now found by the query. In the previous case, the div's children weren't populated, but the div's themselves were returned.
现在查询找到了 tr 类。在前一种情况下，没有填充 div 的子级，但返回了 div 本身。
Very tricky...
很棘手...
Note that this was a sample and was adapted from my other work, so I appologize if there were any confusing typos.
请注意，这是一个样本，改编自我的其他作品，所以如果有任何令人困惑的拼写错误，我深表歉意。
回答by Didier Ghys
Well you code is not really correct. .find()does not expect a function as parameter but a selector, a jquery object or a DOM element.
那么你的代码并不正确。.find()不需要一个函数作为参数，而是一个选择器、一个 jquery 对象或一个 DOM 元素。
Looking at the value of thiswithin your callback in the find method, it refers to the document, and not you <div>as you expect.
在thisfind 方法中查看回调中的值，它指的是document，而不是您<div>所期望的。
Here's a correct code:
这是一个正确的代码：
$(document).ready(function(){
// cannot use .children() because the <dt> are not direct children
$('.div_item').find('.access_text').each(function() {
alert(this.innerText);
});
});
