javascript - 如果可能的话，我需要帮助逐行理解这个 jQuery 过滤器函数的工作原理

Question

这是 HTML:

<div>
    <h3>text</h3>
</div>
<div>
    <h3>moretext</h3>
</div>
<div>
    <h3>123</h3>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

这是 JS:

var rv1_wlength = $("div").filter(function() {
    return $(this).find("h3").filter(function () {
        return $(this).text() != "123";
    }).length;
});

var rv1_wolength = $("div").filter(function() {
    return $(this).find("h3").filter(function () {
        return $(this).text() != "123";
    });
});

var rv2 = $("div").find("h3").filter(function() {
    return $(this).text() != "123";
});

alert(rv1_wlength.text());   // text
                             // moretext

alert(rv1_wolength.text());  // text
                             // moretext
                             // 123

alert(rv2.text());​           // textmoretext

我不明白为什么前两个方法在每行上打印元素，而第二个方法将它们连接起来。 rv2 是一个 jQuery 对象。那么，前两个(rv1_wlength 和 rv1_wolength)是什么？

此外，我不明白为什么包含 length 属性会在过滤元素时产生所有差异。第二种方法不执行任何操作，因为它返回所有元素。第一种方法唯一的变化是添加了 length 属性，可以正确过滤元素。我非常想要逐行的解释。

如果有任何反馈，我将不胜感激。谢谢。

Answer 1

此代码获取所有包含至少一个 h3 且其文本不是“123” 的div 元素。

var rv1_wlength = $("div").filter(function() {
    return $(this).find("h3").filter(function () {
        return $(this).text() != "123";
    }).length;
});

<小时/>

这段代码没有用:

var rv1_wolength = $("div").filter(function() {
    return $(this).find("h3").filter(function () {
        return $(this).text() != "123";
    });
});

这将返回原始选择 $('div')，因为回调函数始终返回 true 值(空的 jQuery 集仍被视为 true)。

<小时/>

最后，此代码获取所有文本不是 "123" 的 h3 元素:

var rv2 = $("div").find("h3").filter(function() {
    return $(this).text() != "123";
});

<小时/>

当您调用.text()时，jquery 会连接所选内容中所有元素的文本。在第一种情况下，这是连接 div 内的文本，其中包含换行符。在第二个中，它连接了 h3 中不连接的文本。