Нужна помощь в создании первого простого плагина jquery

Question

Я пытаюсь создать свой первый плагин jQuery, но он оказывается сложнее, чем я думал.

Я пытаюсь добиться чего-то подобного, когда вы называете селектор и указываете, сколько элементов должно быть в строке.

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

Тогда функция плагина выберет nth-child (Xn) прямых дочерних элементов # photo-gallery, где X - опция, переданная выше. В данном случае это число 3.

Я бы также хотел, чтобы он выбирал прямых потомков исходного селектора, # photo-gallery, так что если у меня есть div, элементы списка, теги привязок или что-то еще, как прямые потомки # photo-gallery, это элементы, к которым применяется nth-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($) {
  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);

или в кофейном тексте

($) ->

  $.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

Answer 3

Это должно прояснить для вас, как сделать параметры для вашего плагина:

$(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' });
        });

    });

Параметры в настройках будут вашими параметрами по умолчанию, пока они не будут установлены при вызове плагина. как только они установлены, они переопределят начальное значение. Так что этот предупредит дд