Question

这个真的让我感到困惑：

我有一组“商品”，我想选择每个组中的第一个<pre>。

<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);

});

我希望输出是<pre>块的内容，但相反，我什么也得不到。如果我在匹配的元素上使用.size()函数，我每次都会得到0。

上面的代码可以在jsFiddle上找到：http://jsfiddle.net/george_edison/syLMD/8/

Answer 1

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

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

Answer 2

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

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

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

});

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

2 个答案: