排空的jQuery的div而不影响其他的div(emptying divs in jQuery wi

我一直在多个div的这个jQuery系统nth-child基于浏览器的宽度位置的变化或“转移”。这几乎是完整的，但我遇到了，我不能设法在这一点上绕到我的头一个问题，我会解释..

我有4个格默认情况下，用自己的nth-child的位置，那么当你的浏览器的宽度或窗口大小的变化到我指定的范围，在申报单的一个nth-child的位置变化。我使用的是.empty技术使这一切工作，而这正是我的问题所在。所以说，我有全部用在其中参考译文：div的。当浏览器的宽度变化，div的自败或“清空”中的文本。当我不使用空，这些div中的文本停留，而是nth-child移不无空的正常工作......这里是的jsfiddle。

http://jsfiddle.net/H5REk/8/当调整从其他的div HTML窗口的文本颜色红色，蓝色等仍然..所以我用解决这个.empty 。像这样：

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

但同样，当.empty的使用和您指定窗口大小/浏览器的宽度..或div的dissapear内的文本得到“走光”不是。

所以，用一个方法的问题是我的div中的所有文本得到清空。然后用另一种方法，申报单或文本正在重建，并不会被删除..所以我将如何得到它的工作，因此浏览器的宽度nth-child换工作正常，同时也使我的div内的文本还是留？

根据您的意见我有几个不同的解决方案。

我不知道你是否想在特殊的彩色框暂时替换现有（当前行为），或者如果你想他们到您指定的第n个孩子箱后追加（根据您的意见）。

在这两个的removeSpecialBoxes方法被调用之初checkWidth

更换方法（的jsfiddle ）

这种方法有点复杂，因为你需要跟踪你删除的项目，然后重新插入后完全相同的项目。除了下面的JS，有一些CSS的变化，以及，也就是我所做的特种箱的ID为每个有类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);
}