Question

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

我默认有4个div，有自己的nth-child位置，当浏览器宽度或窗口大小变为我指定的范围之一时，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中的文本仍然保留？ / p>

Answer 1

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

我不知道您是否希望特殊彩色框暂时替换现有的（当前行为），或者您是否希望将它们添加到您指定的第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);
}

在jQuery中清空div而不影响其他div

1 个答案: