在jQuery中清空div而不影响其他div [英] emptying divs in jQuery without affecting other divs

问题描述

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

I've been working on this jquery system where multiple div's nth-child position changes or "shifts" based on browser width. It's almost complete but I've ran into one issue that I can't manage to wrap my head around at this point, I'll explain..

我有4个div默认使用自己的 nth-child 位置，然后当您的浏览器宽度或窗口大小变为我指定的范围之一时，div nth-孩子职位变动。我正在使用 .empty 技术来完成这一切，这就是我的问题所在。所以说我有四个div都在其中有文本..当浏览器宽度改变时，div内的文字消失或清空。当我不使用空时，这些div中的文本仍然存在，但 nth-child 移位器无法正常工作...这里是jsFiddle 没有空。

I have 4 divs by default with their own nth-child positions, then when your browser width or window size changes into one of my specified ranges, the divs nth-child position changes. I'm using the .empty technique to make this all work, and that is where my problem lies. So say I have four divs all with text within them.. when the browser width changes, the text inside the divs dissapears or "empties". And when I do not use empty, the text within these divs stays, but the nth-child shifter doesn't work correctly... here is the jsFiddle without empty.

http：// jsfiddle .net / H5REk / 8 /
当您调整HTML窗口的大小时，其他div中的文本颜色为红色，蓝色等仍然保留..所以我通过使用来解决这个问题。空。像这样：

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

但是，再次使用 .empty 并且你不在指定的窗口大小/浏览器宽度.. div中的文本消失或得到清空。

But again, when .empty is used and you're not in the specified window size / browser width.. the text within the divs dissapear or get "emptied".

所以，一个方法的问题是我在div中的所有文本被清空。然后使用另一种方法，正在重新创建div或文本而不删除..那么我将如何使其工作，以便浏览器宽度 nth-child 更换器正常工作还使我的div中的文本仍然存在？

So, the problem with one method is all my text within the divs get emptied. And then with the other method, divs or text is being recreated and not removed.. So how would I get it to work so the browser width nth-child changer works correctly while also making the text within my divs still stay?

推荐答案

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

Based on your comments I have a couple different solutions.

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

I did not know whether you wanted the special colored boxes to temporarily replace the existing ones (current behavior) or if you wanted them to be appended after the nth-child box you specified (based on your comments).

在这两个方面， removeSpecialBoxes 方法在<$ c $开头调用c> checkWidth

In both of these the removeSpecialBoxes method is called at the beginning of checkWidth

替换方法（ jsfiddle ）

Replacement Method (jsfiddle)

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

This approach is a bit more complicated as you need to keep track of the items you remove and then reinsert the same exact item later. In addition to the below JS, there were some CSS changes as well, namely I made the special boxes have IDs and each have the class test.

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

First, I created a new object to hold the stored boxes.

var theStored = {};

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

Then I created a couple methods to handle the creation and removal of special boxes.

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 使用特殊框处理存储和替换现有框的方法。

Then I modified your setNthPosition method to handle the storing and replacing of the existing box with the special box.

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 ）

Appending Method (jsfiddle)

这种方法有点简单。它本质上是您问题中的现有代码，只有一些小的改动。

This approach is a bit simpler. It is essentially the existing code from your question with a few minor changes.

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！