对数组中的 z 索引进行排序答案

【问题标题】：Ordering z-indexes in an array对数组中的 z 索引进行排序
【发布时间】：2011-02-11 14:49:11
【问题描述】：

我有一个数组，看起来像

resourceData[0][0] = "pic1.jpg";
resourceData[0][1] = 5;

resourceData[1][0] = "pic2.jpg";
resourceData[1][1] = 2;

resourceData[2][0] = "pic3.jpg";
resourceData[2][1] = 900;

resourceData[3][0] = "pic4.jpg";
resourceData[3][1] = 1;

数字代表图像的 z-index。最小 z-index 值为 1。最大值（不是很重要）为 2000。

我已经完成了所有的渲染和设置 z-indexes。我的问题是，我想要四个功能：

// Brings image to z front
function bringToFront(resourceIndex) {

    // Set z-index to max + 1
    resourceData[resourceIndex][1] = getBiggestZindex() + 1;

    // Change CSS property of image to bring to front
    $('#imgD' + resourceIndex).css("z-index", resourceData[resourceIndex][1]);
}

function bringUpOne(resourceIndex) {

}

function bringDownOne(resourceIndex) {

}

// Send to back z
function sendToBack(resourceIndex) {

}

那么给定索引 [3] (900 z)：

如果我们将它发送到后面，它将取值 1，而 [3] 将必须转到 2，但这与 z-index 为 2 的 [1] 冲突，因此他们需要转到 3等等

有没有一种简单的编程方式可以做到这一点，因为一旦我开始这样做，它就会变得一团糟。

数组的索引不会改变是重要。不幸的是，由于设计原因，我们无法对数组进行排序。

更新感谢您的回答，一旦编写了函数，我将在此处发布，以防将来有人遇到此问题（注意此代码在 [6] 中列出了 zindex）

// Send to back z
function sendToBack(resourceIndex) {

    resourceData[resourceIndex][6] = 1;
    $('#imgD' + resourceIndex).css("z-index", 1);

    for (i = 0; i < resourceData.length; i++) {
        if (i != resourceIndex) {
            resourceData[i][6]++;
            $('#imgD' + i).css("z-index", resourceData[i][6]);
        }
    }    
}

【问题讨论】：

如果 actual（相对于 relative）z-index 值不重要，您可以简单地使用重新排序列表并然后重新分配 z-index 值。换句话说，使用数组中的位置来建模 z-index 关系，然后在更改时通过列表在一个简单的循环中分配 z-indexes。
@Pointy 抱歉我在问题末尾的注释中进行了编辑，由于程序的设计我无法对数组列表进行排序，这些索引在整个程序中都使用了它会破坏功能。
所有的 z 索引都保证是唯一的，这是一件很有帮助的事情。

标签： javascript jquery arrays sorting z-index

【解决方案1】：

循环！此功能将对其周围受影响的图像重新排序。它将适用于具有广泛分离的 z-index 值的图像。除非需要，它也不会执行任何更改。

编辑：添加了完成 CSS 工作的功能编辑 2：更正了顶部/底部功能的问题 - 它没有移动所有受影响的图像，现在可以了。

var resourceData = Array();
resourceData[0] = Array();
resourceData[0][0] = "pic1.jpg";
resourceData[0][1] = 5;

resourceData[1] = Array();
resourceData[1][0] = "pic2.jpg";
resourceData[1][1] = 2;

resourceData[2] = Array();
resourceData[2][0] = "pic3.jpg";
resourceData[2][1] = 900;

resourceData[3] = Array();
resourceData[3][0] = "pic4.jpg";
resourceData[3][1] = 1;

function _doMoveImage(ptr) {
    // Change CSS property of image
    $('#imgD' + ptr).css("z-index", resourceData[ptr][1]);
}

// Brings image to z front
function bringToFront(resourceIndex) {
    var highest_idx = 0;
    for (var i = 0; i < resourceData.length; i++) {
        // for all images except the target
        if (i != resourceIndex) {
            // preserve the highest index we encounter
            if (highest_idx < resourceData[i][1])
                highest_idx = resourceData[i][1];
            // move any images higher than the target down by one
            if (resourceData[i][1] > resourceData[resourceIndex][1]) {
                resourceData[i][1]--;
                _doMoveImage(i);
            }
        }
    }

    // now move the target to the highest spot, only if needed
    if (resourceData[resourceIndex][1] < highest_idx) {
        resourceData[resourceIndex][1] = highest_idx;
        _doMoveImage(resourceIndex);
    }

    return;
}

function bringUpOne(resourceIndex) {
    var next_idx = 2000;
    var next_ptr = false;
    for (var i =0; i < resourceData.length; i++) {
        // for all images except the target
        if (
            i != resourceIndex &&  
            next_idx > resourceData[i][1] && 
            resourceData[i][1] > resourceData[resourceIndex][1]
        ){
            next_idx = resourceData[i][1];
            next_ptr = i;
        }
    }

    // only move if needed
    if (next_ptr) {
        // target takes next's index
        resourceData[resourceIndex][1] = resourceData[next_ptr][1];
        // next's index decreases by one
        resourceData[next_ptr][1]--;
        _doMoveImage(resourceIndex);
        _doMoveImage(next_ptr);
    }
    return;
}

function bringDownOne(resourceIndex) {
    var next_idx = 0;
    var next_ptr = false;
    for (var i =0; i < resourceData.length; i++) {
        // for all images except the target
        if (
            i != resourceIndex &&  
            next_idx < resourceData[i][1] && 
            resourceData[i][1] < resourceData[resourceIndex][1]
        ){
            next_idx = resourceData[i][1];
            next_ptr = i;
        }
    }
    // only move if needed
    if (next_ptr) {
        // target takes next's index
        resourceData[resourceIndex][1] = resourceData[next_ptr][1];
        // next's index decreases by one
        resourceData[next_ptr][1]++;
        _doMoveImage(resourceIndex);
        _doMoveImage(next_ptr);
    }
}

// Send to back z
function sendToBack(resourceIndex) {
    var lowest_idx = 2000;
    for (var i = 0; i < resourceData.length; i++) {
        // for all images except the target
        if (i != resourceIndex) {
            // preserve the lowest index we encounter
            if (lowest_idx > resourceData[i][1])
                lowest_idx = resourceData[i][1];
            // move any images lower than the target up by one
            if (resourceData[i][1] < resourceData[resourceIndex][1]) {
                resourceData[i][1]++;
                _doMoveImage(i);
            }
        }
    }

    // now move the target to the lowest spot, only if needed
    if (resourceData[resourceIndex][1] > lowest_idx) {
        resourceData[resourceIndex][1] = lowest_idx;
        _doMoveImage(resourceIndex);
    }
    return;
}

【讨论】：

【解决方案2】：

就是这样：复制您的结构并对其进行正确排序，或者如果您更喜欢将其称为索引。当您需要图片时，找到正确的 z-index 并继续进行渲染。

如果您不想复制整个结构，您可以动态执行此操作并使用堆。

【讨论】：

他正在渲染多个图像，实际上他没有进行任何渲染......浏览器是......他想要做的就是改变图像相对于其他图像的z-index。这个答案没有任何意义
@Toby 我认为这很有意义，我可以复制数据数组，对副本进行排序，然后以压缩格式将 z-index 值重新插入到原始数组中。
@Tom，我没有读到任何接近你刚刚从那个答案中描述的内容......虽然是的，你描述的内容可能有效。尤其是因为他在谈论渲染和堆，这听起来像是在实际编写图形应用程序，而不是设置 CSS 属性
@tobyodavies 我很无知，你必须渲染标签。但是，是的，由于您不理解的原因，答案没有意义。顺便说一句，你知道我所说的堆是什么意思吗？
@bestsss 是的，我知道堆是什么，但是因为他 a) 需要一个总顺序（不仅仅是最小/最大），所以堆不是一个合适的数据结构

【解决方案3】：

没有测试，但是这个怎么样。对于bringUpOne，bringDownOne，你可以交换z-indexes，例如：

function bringUpOne(resourceIndex) {

    var myZIndex = resourceData[resourceIndex][1];
    var nextZIndex =  resourceData[resourceIndex + 1][1];

    resourceData[resourceIndex][1] = nextZIndex;
    resourceData[resourceIndex + 1][1] = myZindex;

}

为了带到前面：

function bringToFront(resourceIndex) {

    var maxZIndex = resourceData[maxResourceIndex][1];
    resourceData[resourceIndex][1] = maxZIndex + 1;

}

现在一切都好。但是，如果您想将图像连续设置到后面会发生什么？您可以每次将 zIndex 设置为 0（不知道您在任何时候实际上会有多少可见），或者您可以从设置为 2000 或 10000 之类的最低 zIndex 开始，这将容纳许多调用setToBack。

编辑：这假定列表按 zIndex 排序开始。

【讨论】：

资源可能不是按 z-index 排序的。因此，调出不会按预期工作。