4

我想重新使用 jQuery 选择来进行进一步的子选择。这是我的例子：

if ($('#thisId > .thatClass').length > 0) {
    return $('#thisId > .thatClass > a.thatOtherClass').attr('id');
}

当我广泛使用选择时，我希望（至少出于可读性原因）缩短代码以使其看起来类似于以下内容：

var selection = $('#thisId > .thatClass');
if (selection.length > 0) {
    var furtherSelection = selection.filter('> a.thatOtherClass');
    return furtherSelection.attr('id');
}

尝试这个我得到一个错误：

TypeError：进一步的Selection.attr（...）未定义

显然我有问题，也许有人有想法？

4

2 回答 2

6

children()而是我们...

var selection = $('#thisId > .thatClass');
if (selection.length > 0)
{
    return selection.children('a.thatOtherClass').attr('id');
}

我已经使用children()了，因为>in 选择器的使用将被弃用（根据下面的评论）。

如果您不是专门寻找子元素，那么您可以find()像这样使用...

var selection = $('#thisId > .thatClass');
if (selection.length > 0)
{
    return selection.find('a.thatOtherClass').attr('id');
}
于 2012-12-04T14:29:18.933 回答
1

您可以.children()按照 Archer 的建议使用，并且应该使用. .filter但根本问题是您在使用.find. ("> a.thatOtherClass")Archer 暗示了这一点，但重要的是要了解除了最佳实践之外，您的构造没有问题。

filter不遍历 DOM 树；它在相同的 DOM 级别从当前序列中删除元素。所以，当你写这个时：

var furtherSelection = selection.filter('> a.thatOtherClass');

您实际上是在说“满足'#thisId > .thatClass' AND ALSO '> a.thatOtherClass'的元素”。.thatClass因此，当您应该测试他们的孩子时，您正在测试您的中间元素。如果您使用find或children代替，它会起作用：

var furtherSelection = selection.find('> a.thatOtherClass');   //works
var furtherSelection = selection.children('a.thatOtherClass'); //also works

在 jsFiddle 上查看这些操作：http: //jsfiddle.net/jmorgan123/S726f/

我指出这一点是因为 和 之间的区别.filter非常.find重要，而您真正的问题是您混淆了两者。

于 2012-12-04T19:02:58.723 回答