Question

我已经对一个演示中的jQuery感到有点沮丧我一起拍打并且想知道以下是否只是jQuery的选择器和搜索方法的限制，或者我＆＃39 ;我只是错了。

以下是一个示例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>

这是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);
     }):
});

我的问题是，为什么$('.div_item')数组对象中的子项没有填充？如果他们没有填充，则无法引用，则无法正确.find()。这就是我认为我的用法就是问题所在。

到目前为止，我所看到的所有建议都适用于更平坦的DOM。例如<div class='div_item'><dt class="access_text"></dt></div>，但不能用于进一步嵌套的内容。

Answer 1

你的代码不是很正确。 .find()不希望函数作为参数，而是期望选择器，jquery对象或DOM元素。

在find方法中查看回调中this的值，它会引用文档，而不是您所期望的<div>。

这是一个正确的代码：

$(document).ready(function(){
    // cannot use .children() because the <dt> are not direct children
    $('.div_item').find('.access_text').each(function() {
        alert(this.innerText);
    });
});

Answer 2

确定!!!如果有人好奇并且认为我一直都很疯狂，那就试试吧。上面的jQuery +更新的HTML示例包装标签！

我正在测试表中的div，它可能在DOM解析中找到了一个空白。我知道div不应该被插入到它之间和它的元素中，但我从没想过它会让我这样惊讶！

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

以下是我如何调整它以使用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>

查询现在可以找到tr类。在前一种情况下，div的子节点没有填充，但div本身已经返回。

非常棘手......

请注意，这是一个示例，并根据我的其他工作进行了调整，所以如果有任何令人困惑的拼写错误，我会道歉。

jQuery查找，每个，孩子和访问子孩子

2 个答案: