Jquery - 自己的jquery ui堆栈函数

Question

我尝试排除 jquery ui 堆栈函数

JS代码

 stack('myStack');

 function stack(selector)
 {
    var group = $.makeArray(selector).sort(function(a,b) {
            return (parseInt($(a).css("zIndex"),10) || 0) - (parseInt($(b).css("zIndex"),10) || 0);
    });
    if (!group.length) { return; }

    var min = parseInt(group[0].style.zIndex) || 0;
    $(group).each(function(i) {
            this.style.zIndex = min + i;
    });

    this[0].style.zIndex = min + group.length;

 }

我收到错误group[0].style is undefined。带有选择器 ".myStack" 的 div 存在。 希望可以有人帮帮我。

提前致谢!
彼得

---

编辑:jquery ui 代码

$.ui.plugin.add("draggable", "stack", {
    start: function(event, ui) {

        var o = $(this).data("draggable").options;

        var group = $.makeArray($(o.stack)).sort(function(a,b) {
            return (parseInt($(a).css("zIndex"),10) || 0) - (parseInt($(b).css("zIndex"),10) || 0);
        });
        if (!group.length) { return; }

        var min = parseInt(group[0].style.zIndex) || 0;
        $(group).each(function(i) {
            this.style.zIndex = min + i;
        });

        this[0].style.zIndex = min + group.length;

    }
});

---

编辑: http://jsfiddle.net/ugfFU/4/

HTML

<div style="background-color:#ff0000;" class="dragStack test"></div>
<div style="background-color:#00aa00;" class="dragStack test"></div>
<div style="background-color:#ff00aa;" class="dragStack test"></div>
<div style="background-color:#0000aa;" class="dragStack test"></div>

JS

$(document).ready(function() {


$(".test").draggable({
        addClasses: false,
        start: function(event, ui) {  },
        stop:  function(event, ui) {  }
    })
    .mouseup(function(data, handler)
    {
       stacker(this,'.dragStack');
    });
 });


 function stacker(thisA,selector)
 {
    var group = $(selector).get().sort(function(a, b) {
        return ((parseInt(a.style.zIndex), 10) || 0)-((parseInt(b.style.zIndex), 10) || 0);
    });

    if (!group.length) {
         return;
    }

    var min = parseInt(group[0].style.zIndex) || 0;
    $.each(group, function(i) {
        this.style.zIndex = min + i;
        $(this).css('z-index',''+this.style.zIndex+'');
    });

    $(thisA).css('z-index',''+min + group.length+'');

 }

Answer 1

$.makeArray()并不像您想象的那样:它将类似数组的对象转换为“真正的”数组，但不解析选择器。

尝试使用get()或toArray()相反:

function stack(selector)
{
    var group = $(selector).get().sort(function(a, b) {
        return (parseInt(a.style.zIndex), 10) || 0)
             - (parseInt(b.style.zIndex), 10) || 0);
    });

    if (!group.length) {
        return;
    }

    var min = parseInt(group[0].style.zIndex) || 0;
    $.each(group, function(i) {
        this.style.zIndex = min + i;
    });

    // Not sure about the line below, depends on the context the function
    // is called in.
    this.style.zIndex = min + group.length;
}