自己的jQuery插件只在第一個選擇器上工作

Question

我已經開始編寫我的第一個插件了。 它是一個簡單的jQuery插件，可根據屏幕寬度重新排序DOM。 如果插件用在單個選擇器上，例如$("#box3").domorder(); 它按預期工作。

但是，如果使用多個選擇器來調用該函數，或者多次調用該函數，則該函數僅在第一個選擇器上運行一次。

我有each(function(){})迭代每個選擇器，但我顯然缺少一些東西。

的jsfiddle

(function($) {
    "use strict";

    $.fn.domorder = function(options) {

        var settings = {
            breakpoint : 960,
            targetContainer : $(this).parent(),
            targetPosition : "start"
        };

        if (options) {
            $.extend(settings, options);
        }

        return this.each(function(i, el) {
            /* remember selector's original order position */
            var originalLocation = {};
            if ($(el).prev().length) {
                /* not originally first child */
                originalLocation.prev = $(el).prev()[0];
            } else {
                /* originally a first child */
                originalLocation.parent = $(el).parent()[0];
            }

            var initiatedomorder = function() {
                var winW = $(window).width();

                if (winW < settings.breakpoint && !$("body").hasClass("domorder-reordered")) {
                    /* dom the order of the item */

                    if (settings.targetPosition === "start") {
                        $(el).prependTo(settings.targetContainer[0]);
                    } else {
                        $(el).appendTo(settings.targetContainer[0]);
                    }
                    $("body").addClass("domorder-reordered");
                } else if (winW >= settings.breakpoint && $("body").hasClass("domorder-reordered")) {
                    /* return the reordered item back into the orignal flow */
                    if (originalLocation.parent) {
                        /* element was a first child */
                        $(originalLocation.parent).prepend(el);
                    } else {
                        /* element was not a first child */
                        /* add a line break to preserve inline-block spacing */
                        $(originalLocation.prev).after(el).after("\n");
                    }
                    $("body").removeClass("domorder-reordered");
                }
            };

            initiatedomorder();

            $(window).resize(function() {
                initiatedomorder();
            });
        });
    };
}(jQuery));

Answer 1

您將在循環的第一次迭代中將類添加到正文中。 所以在第二次迭代中，body具有類，並且在命令代碼中輸入。 你必須重新考慮addClass和removeClass的位置

並將以下代碼放在每個代碼之外

$(window).resize(function() {
    initiatedomorder();
});

Answer 2

$("body").addClass("domorder-reordered"); 導致問題，因為只有第一次迭代才會進行排序。

也許你應該將$("body")改為$(el.parentNode) 。

檢查這個jsfiddle