Question

我正在尝试了解过滤器的工作原理并编写了一个小的html代码，如下所示

<div id='btnContainer'>
    <input type="button" id='btnContinue' value='Continue'>
    </input>
    <input type="button" id='btnCancel' value='Cancel'>
    </input>
</div>

alert($('#btnContainer').filter('#btnContinue').length);

这导致警报msg为0而不是我期望的1 - jquery 1.44

指针

Answer 1

阅读手册：

将匹配元素集减少到与选择器匹配的元素集通过功能测试。

您的选择器$('#btnContainer')的匹配元素仅为父级，不包括其子级。如果要过滤输入，请使用：

alert($('#btnContainer').children().filter('#btnContinue').length);

此外，input元素是自我关闭的......

Answer 2

filter方法通过输入方法的选择器减少匹配的元素集。您已选择一个项目#btnContainer，然后尝试过滤此选择，其中包含ID为#btnContinue的元素。在您选择的元素集中，没有id为#btnContinue的元素，只有一个id为#btnContainer的元素，这就是您收到0的原因。

正确使用过滤方法是选择多个项目，例如一堆具有相同类名的div，然后使用其他一些标准过滤您选择的div。

此演示说明了过滤方法的正确使用：http://jsfiddle.net/8AMYx/1/

查看JQuery文档以获取其他示例： http://api.jquery.com/filter/

Answer 3

$('#btnContainer')匹配单个元素 - 您的第一个顶级div。

.filter()会将匹配元素集合仅限制为与新辅助选择器匹配的元素 - 在本例中为#btnContinue。由于顶级div与id-selector #btnContinue不匹配，因此新匹配的集合为空。

如果您希望初始选择器与元素及其所有子元素匹配，请执行：

var matchedSet = $('#btnContainer').find('*').andSelf();

然后你可以这样做：

alert( matchedSet.filter('#btnContinue').length ); // == 1

Demo of corrected code

有关详细信息，请参阅.filter()的jQuery文档。

Answer 4

它返回0件商品，因为没有ID btnContainer和btnContinue的商品

过滤器会将结果集减少为仅与filter选择器匹配的项目。

你可能想要这个：$('#btnContainer input').filter('#btnContinue').length

了解JQuery过滤器属性

4 个答案: