没有父元素的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/。它是关于使用jQuery创建无限走廊的。

- Ryan Sampson

Answer 1

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

$('> div', this)

被翻转以使用类似于 .find() 的方式：

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

使用 > 子选择器，它就是这样的：

$(this).children('div')

其他人正在做同样的交易，他们可以使用.children()，实际上这样做更有效率。

- Nick Craver

Answer 2

这里有一个父级对象（在这个例子中是scope），注意选择器内的this关键字，它相对于应用插件的元素。

jQuery的选择器允许您设置作用域，可以是任何jQuery元素对象。

请考虑

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

在插件内部

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

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

- Marko

Answer 3

$('> div', this)

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

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

查看 $()文档以获取更多信息；它明确提到了以下内容：

在内部，选择器上下文是通过 .find() 方法实现的，因此 $('span', this) 等同于 $(this).find('span')。

$(this).find('> div') 的意思是“这个元素的子代 div”，等同于 $(this).children('div')。

- MvanGeest