1

我一直在研究这个 jquery 系统，其中多个 div 的nth-child位置会根据浏览器宽度发生变化或“移位”。它几乎完成了，但我遇到了一个我现在无法解决的问题，我会解释..

默认情况下，我有 4 个具有自己nth-child位置的 div，然后当您的浏览器宽度或窗口大小更改为我指定的范围之一时，div 的nth-child位置会更改。我正在使用该.empty技术使这一切正常工作，这就是我的问题所在。所以说我有四个 div，里面都有文本。当浏览器宽度发生变化时，div 中的文本消失或“清空”。当我不使用空时，这些 div 中的文本会保留，但nth-child移位器无法正常工作......这是没有空的 jsFiddle。

http://jsfiddle.net/H5REk/8/ 当您调整 HTML 窗口的大小时，其他 div 中的红色、蓝色等文本颜色仍然存在。所以我使用.empty. 像这样：

http://jsfiddle.net/H5REk/7/

但是同样，当.empty使用时并且您不在指定的窗口大小/浏览器宽度中.. div 中的文本消失或“清空”。

因此，一种方法的问题是我在 div 中的所有文本都被清空了。然后使用另一种方法，正在重新创建 div 或文本而不是删除它。那么我将如何让它工作，以便浏览器宽度更改器nth-child正常工作，同时让我的 div 中的文本仍然保留？

4

1 回答 1

2

根据您的评论，我有几个不同的解决方案。

我不知道您是否希望特殊颜色的框暂时替换现有的框（当前行为），或者您是否希望将它们附加在您指定的第 n 个子框之后（根据您的评论）。

在这两种removeSpecialBoxes方法中，方法都在开始时调用checkWidth

替换方法（jsfiddle）

这种方法有点复杂，因为您需要跟踪删除的项目，然后稍后重新插入相同的确切项目。除了下面的 JS 之外，还有一些 CSS 更改，即我让特殊框有 ID，每个都有 class test。

首先，我创建了一个新对象来保存存储的盒子。

var theStored = {};

然后我创建了几个方法来处理特殊盒子的创建和删除。

function makeSpecialBox(id, content) {
    // Create a new special box with the class name and the content
    var specialBox = $("<div />", {
        "id": id,
        "class": "test"
    }).html(content);
    // Return the special box
    return specialBox;
}

function removeSpecialBoxes() {
    // Get the special boxes
    var specialBoxes = $("#wrapper div").filter(".test");
    // For each special box
    specialBoxes.each(function(index, specialBox) {
        // Get the special box's ID
        var specialBoxId = $(specialBox).attr("id");
        // Get the associated stored box
        var storedBox = theStored[specialBoxId];
        // Replace the special box with the stored box
        $(specialBox).replaceWith(storedBox);
    });
}

然后我修改了你的setNthPosition方法，用特殊盒子处理现有盒子的存储和替换。

function setNthPosition(theDiv, newPos){
    // Generate a new special box
    var specialBox = theDivs["div"+theDiv].clone();
    // Get the special box ID
    var specialBoxId = specialBox.attr("id");
    // Get the existing box to replace
    var existingBox = $("#wrapper div:nth-child("+newPos+")");
    // Clone the existing box and store it based on the special box ID
    theStored[specialBoxId] = existingBox.clone();
    // Replace the existing box with the special box
    existingBox.replaceWith(specialBox);
}

附加方法（jsfiddle）

这种方法稍微简单一些。它本质上是您问题中的现有代码，并进行了一些小的更改。

function makeSpecialBox(className, content) {
    // Create a new special box with the class name and the content
    var specialBox = $("<div />").addClass(className).html(content);
    // Return the special box
    return specialBox;
}

function removeSpecialBoxes() {
    // Get the special boxes
    var specialBoxes = $("#wrapper div").filter("[class^='test']")
    // Remove the special boxes
    specialBoxes.remove();
}

function setNthPosition(theDiv,newPos){
    // Generate the special box
    var theClone=theDivs["div"+theDiv].clone();
    // Append the special box after the nth-child
    $("#wrapper div:nth-child("+newPos+")").after(theClone);
}
于 2013-02-07T22:29:00.230 回答