使用 eq() 和 filter() 的 Jquery 选择器

Question

我想知道是否可以将 eq() 与 filter() 一起使用。我已经对其进行了测试，但无济于事，尽管我找到了解决方法。我只是想知道万一我错过了什么。

我的例子是这个... 假设您有几个包含列和行的表。

<table class="menuTable"><tr><td>1</td><td>2</td></tr></table>
<table class="menuTable"><tr><td>3</td><td>4</td></tr></table>

我想知道每张表有多少列空间，所以...

<script type="text/javascript">
alert($(".menuTable").eq(0).filter("td").length);
alert($(".menuTable").eq(1).filter("td").length);
</script>

这不起作用，我想找出原因。我最终使用 .find() 而不是 .filter()，但我认为使用 .filter() 会更合适。

感谢您的任何意见。

在几次 cmet 之后，我意识到我的问题在于查找和过滤之间的区别。还有……对于那些好奇的人。我确实设法通过在选择器中包含 eq 来使用过滤器使其工作......

alert($(".menuTable:eq(0)").filter("td").length);

Answer 1

我最终使用 .find() 而不是 .filter()，但我认为它会是 更适合使用.filter()。

find 确实是您应该在这里使用的。 filter 顾名思义，过滤元素的集合，在你的情况下，集合是所有 .menuTable 元素；该集合中没有tds。另一方面，find 查找子元素，而您的集合确实有 td 子元素。

Answer 2

filter()过滤已经选择的元素，你要找的是find()，它会在被选择的元素中找到元素，这实际上是正确的方法！

alert($(".menuTable").eq(0).find("td").length);

Answer 3

您的意思是找出每个表中有多少列（不确定“列空间”是什么意思）？在这种情况下，您可以使用find：

$(document).ready(function() {
    alert($(".menuTable").eq(0).find("td").length);
    alert($(".menuTable").eq(1).find("td").length);
});

如果您使用良好的 JavaScript 调试器（例如在 Chrome 中）或登录到控制台，您可以看到 $('.menuTable').eq(0) 将返回第一个匹配的表。对此应用filter 是没有意义的——如果您使用find('td') 然后想根据类属性过滤td 元素，这将是有意义的。

演示：jsfiddle