jQuery选择器作为变量。无法选择合适的元素

Question

此选择器有效：

$('#nav ul li li').append('<span></span>');

然后，我已将#nav分配给$mainNav，我写了

$mainNav.children("ul").children("li").children("li").append('<span></span>');

但这不起作用。 console.log($mainNav)输出Object[nav#nav]。

Answer 1

$mainNav需要是一个jQuery对象。如果没有，您就无法使用jQuery API。

$mainNav = $($mainNav);

Answer 2

解决：

$mainNav.find('ul li li').append('<span></span>');

Answer 3

使用“代码”版本的问题是，您有children("li").children("li")，但LI s永远不是另一个LI的直接后代，因此$mainNav.children("ul").children("li").children("li")从来没有找到匹配。

您可以添加缺少的级别：

$mainNav.children("ul").children("li").children("ul").children("li").append('<span></span>');

或使用子>选择器将其转换为单个选择器：

$mainNav.find('ul > li > ul > li').append('<span></span>');

你可以按照你解决它的方式（$mainNav.find('ul li li')）来做，但这与：

相同

$mainNav.find("ul").find("li").find("li").append('<span></span>');

你可以想象有点慢。