自己的jQuery插件只工作在第一个选择器
Own jQuery plugin only working on first selector
我已经试着写了我的第一个插件。这是一个简单的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));
$("body").addClass("domorder-reordered");
会导致问题,因为只有第一次迭代才会进行排序。
也许你应该把$("body")
改成$(el.parentNode)
。
check this jsfield
在循环的第一次迭代时将类添加到主体中。所以在第二次迭代中,主体有类,而不是在排序代码中。你必须重新考虑addClass和removeClass的位置
并将以下代码放在每个
之外$(window).resize(function() {
initiatedomorder();
});
相关文章:
- jquery IE7中的第n个选择器
- 如何将返回的值应用于多个不同位置的多个选择器
- 只选择两个选择器中的一个
- 如何制作一个具有多个选择器的jQuery插件,在每个选择器上分别进行匹配
- 多个选择框聚焦第一个选择框
- jQuery结合了多个选择器
- 如何使用replaceWith()一次替换多个选择器
- jQuery显示/隐藏仅适用于第一个选择器
- jQuery隐藏多个选择器时显示
- 为什么是Backbone.Collection为第一个查看器显示了两次
- 根据第一个选择框中选择的内容筛选下一个选择框的值
- 具有多个选择器的事件 - 如何获取触发选择器
- 从第一个选择中选择选项时如何禁用以前的选定选项
- 如何在javascript中添加多个选择器
- 查找带有多个选择器的 prev() 标签
- ng-init 未在 ng-options 中设置第一个选择选项
- 如何根据第一个<选择>选项填充第二个<选择>选项
- Jquery 不能使用 3 个选择器
- jquery:如果第一个选择器返回为空,有没有一种简明的方法可以有条件地使用第二个选择器
- 自己的jQuery插件只工作在第一个选择器