如何从匹配元素列表中选择子元素？

Question

这个确实让我感到困惑：

我有一组“项目”，我想选择每组中的第一个

。

<div class="item">
    <table>
        <tr>
            <td>
                <h1>Test</h1>
                <pre>0</pre>
                <pre>
                    <code>1</code>
                </pre>
                <pre>
                    <code>2</code>
                </pre>
            </td>
        </tr>
    </table>
</div>
<div class="item">
    <pre>
        <code>3</code>
    </pre>
    <pre>
        <code>4</code>
    </pre>
</div>
<div class="item">
    <pre>
        <code>5</code>
    </pre>
</div>
<div id="output"></div>

我的 jQuery 代码如下所示：

$('.item:has(pre)').each(function(){

    text = $(this).filter('pre').html()
                  .replace(/</g,'&lt;').replace(/>/g,'&gt;') + "<br><br>";
    $('#output').append(text);

});

我希望输出是

 块的内容，但我什么也没得到。如果我对匹配的元素使用 .size() 函数，我每次都会得到 0。

上述代码可以在jsFiddle上找到： http://jsfiddle.net/george_edison/syLMD/8/< /a>

Answer 1

$('div.item pre:first-of-type').each(function(){

text = $(this).filter('pre').html().replace(/</g,'<').replace(/>/g,'>') + "<br><br>";
$('#output').append(text);
});

Answer 2

.filter() 仅查看当前元素集，而 .find() 查看后代元素。

$('.item:has(pre)').each(function(){

    text = $(this).find('pre:first').html().replace(/</g,'<').replace(/>/g,'>') + "<br><br>";
    $('#output').append(text);

});