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的选择器。 What is the fastest method for selecting descendant elements in jQuery?

Answer 3

$('> div', this)

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

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

有关详细信息，请参阅the documentation for $();它特别提到了这个：

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

$(this).find('> div')表示“div为this的子项，等于$(this).children('div')。

没有父级的jquery子选择器

3 个答案: