我需要一些帮助来构建第一个简单的jquery插件

Question

我正在尝试构建我的第一个jQuery插件，但事实证明它比我想象的要困难得多。

我正在尝试实现的是这样的东西，您可以命名选择器，并传递一行中应该有多少项。

$('#photo-gallery').grid(3);

然后，插件函数将选择#photo-gallery的直接子元素的第n个子元素(Xn)，其中X是上面传递的选项。在本例中，数字为3。

我还想让它选择原始选择器的直接子项，#photo-gallery，所以如果我有div，list item，anchors标签，或者其他任何东西作为#photo-gallery的直接子项，这些都是第n-child(Xn)应用到的元素。

这就是我所拥有的基本jQuery，但是我不知道如何将它转换成一个插件。

$('#photo-gallery div:nth-child(3n)').addClass("end-row-grid-item");
$('#photo-gallery div:nth-child(3n+1)').addClass("new-row-grid-item");

就这个插件而言，这是我目前所拥有的……

(function($){

    $.fn.extend({

        //pass the options variable to the function
        grid: function(options) {


            //Set the default values, use comma to separate the settings, example:
            var defaults = {
                gridItems: 3
            }

            var options =  $.extend(defaults, options);

            return this.each(function() {

            });
        }
    });

})(jQuery);

就像我说的，我完全不知道如何传递我的选择器和选项来完成插件。

任何帮助都将非常，非常感谢！

Answer 1

如果这就是制作效果所需的全部jQuery，那么可能就没有必要制作一个插件了……如果你真的想这样做，试试这个：

$.fn.grid = function(count) {
    this.children(':nth-child(' + count + 'n)').addClass('end-row-grid-item');
    this.children(':nth-child(' + count + 'n+1)').addClass('new-row-grid-item');
};

这与您给出的代码示例并不完全相同。它只选择直接的子节点，并选择它们是什么类型的元素。这似乎就是您所需要的。

Answer 2

这应该会让你明白如何为你的插件设置参数：

$(function () {


        $.fn.myPlugin = function (options) {

            var settings = {
                'foo': 'bar'
            };

            return this.each(function () {
                // If options exist, lets merge them
                // with our default settings
                if (options) {
                    $.extend(settings, options);
                }

                alert(settings.foo);


            });
        };


        $('p').click(function () {
            $(this).myPlugin({ foo: 'dd' });
        });

    });

设置中的参数将是您的默认参数，直到调用插件时设置它们。一旦设置了它们，它们将覆盖初始值。所以这个会警告dd

Answer 3

与已经发布的内容基本相同……

(function($) {
  return $.fn.grid = function(params) {
    params = $.extend({
      gridItems: 3
    }, params);
    this.find(":nth-child(" + gridItems + "n)").addClass("end-row-grid-item");
    this.find(":nth-child(" + gridItems + "n+1)").addClass("new-row-grid-item");
    return this;
  };
})(jQuery);

或者在coffeescript中

($) ->

  $.fn.grid = (params) ->

    params = $.extend gridItems: 3, params

    @find(":nth-child(#{gridItems}n)").addClass("end-row-grid-item")
    @find(":nth-child(#{gridItems}n+1)").addClass("new-row-grid-item")
    this