jquery 没有父级的子选择器

Question

我正在查看创建轮播菜单的教程中的一些代码，并注意到没有父项的父子选择器。以前从未见过这个，并且对它实际在做什么感到困惑。

请参阅以下代码：

        var $wrapper = $('> div', this).css('overflow', 'hidden'),
        $slider = $wrapper.find('> ul'),
        $items = $slider.find('> li'),
        $single = $items.filter(':first'),

        singleWidth = $single.outerWidth(), 
        visible = Math.ceil($wrapper.innerWidth() / singleWidth), // note: doesn't include padding or border
        currentPage = 1,
        pages = Math.ceil($items.length / visible);

此处教程：http://jqueryfordesigners.com/jquery-infinite-carousel/

Answer 1

这个带有上下文的选择器：

$('> div', this)

翻转以使用 .find() 像这样：

$(this).find('> div')

使用 > child-selector 是只是：

$(this).children('div')

其他人也在做同样的事情，他们可以使用 .children()，实际上这样做会更有效率。

Answer 2

有一个父级（或者在本例中为 scope），请注意选择器内的 this 关键字，它与插件所应用的元素相关。

jQuery 的选择器允许你设置一个范围，它可以是任何 jQuery 元素对象。

考虑

$(".somediv").myplugin();

在插件内部

$("> div", this) 
is actually translated to 
$("> div", $(".somediv"))

看一下我的一个问题，答案解释了很多关于 jQuery 选择器的内容。
在 jQuery 中选择后代元素最快的方法是什么？

Answer 3

$('> div', this)

this 很重要。它是一个上下文参数，使查询等于

$(this).children('div');

参见$()<的文档/a> 了解更多信息；它特别提到了这一点：

在内部，选择器上下文是
使用 .find() 方法实现，
所以 $('span', this) 相当于
$(this).find('span').

$(this).find('> div') 表示“作为 this 子级的 div，等于 <代码>$(this).children('div')。