Question

我有一个简单的页面，使用bootstrap和js / jquery。它通过ajax获取数据并创建要显示给查看器的条目，如：

- 请求

-parse xml创建包含所有数据的对象数组

- 按一个属性排序

创建DOM元素并附加到适当的父元素。

到目前为止一切顺利。

现在，使用按钮，用户可以更改属性以对数组进行排序。

我做了：

//deputados is the array, partido the property 
deputados.sort(sort_by('partido', true, function (a) {
        return deaccentuate0(a);//get rid of accents for sorting
    }));

//here i create nodes in new order
for (var i = 0; i < deputados.length; i++) {
        makePanelEntry($("#containerMaster"), deputados[i])
    };
});

显然，新项目被附加到列表的末尾并且这不是我想要的，它们应该替换页面中的现有元素。（创建和追加由makePanelEntry（）处理你需要看到这个吗？）

问题是：

有没有办法立即清除容器（containerMaster）中的所有元素？我是否需要将其循环并逐个删除？这是正确的做法吗？

我是这样的新人。感谢

[编辑2]：这就是我创建元素的方式：基本上，它以正确的顺序为适当的类创建引导“面板”的元素，然后在交换机中，使用每个deputado适当的值填充面板。如果name使用带有name标签的div创建，依此类推。这些是国会议员的数据：P

deputado是这样的：

var deputado = {
            idCadastro: $(this).find("ideCadastro").text(),
            condicao: $(this).find("condicao").text(),
            matricula: $(this).find("matricula").text(),
            idParlamentar: $(this).find("idParlamentar").text(),
            nome: $(this).find("nome").text(),
            nomeParlamentar: $(this).find("nomeParlamentar").text(),
            sexo: $(this).find("sexo").text(),
            uf: $(this).find("uf").text(),
            partido: $(this).find("partido").text(),
            gabinete: $(this).find("gabinete").text(),
            anexo: $(this).find("anexo").text(),
            fone: $(this).find("fone").text(),
            email: $(this).find("email").text(),
            //comissoes: $(this).find("comissoes").text(),,    
            print_name: function () {
                console.log(deaccentuate0(this.nome));
            }
        };

function makePanelEntry：

var makePanelEntry = function (parent, deputado) {
    var elements = [];
    var outter = $('<div/>', {
        "class": "panel panel-default"
    }).appendTo(parent);

    var heading = $('<div/>', {
        "class": "panel-heading"
    }).appendTo(outter);

    var title = $('<h3/>', {
        "class": "panel-title"
    }).appendTo(heading);

    var row = $('<div/>', {
        "class": "row"
    }).appendTo(title);

    var body = $('<div/>', {
        "class": "panel-body",
    }).appendTo(outter);

    var bodyRow = $('<div/>', {
        "class": "row",
    }).appendTo(body);



    $.each(deputado, function (prop, val) {
        if (typeof val !== 'function') {
            switch (prop) {

            case "nomeParlamentar":
                var np = $('<div/>', {
                    'class': "col-md-3 ",
                    text: val
                });
                elements[0] = np;
                break;

            case "partido":
                var p = $('<div/>', {
                    'class': "col-md-1",
                    text: val
                })
                elements[1] = p;
                break;

            case "uf":
                var u = $('<div/>', {
                    'class': "col-md-1",
                    text: val
                })
                elements[2] = u;
                break;

            case "nome":
                var smallDiv = $('<div/>', {
                    'class': "col-md-3 italic smaller",
                    text: val
                }).appendTo(bodyRow);
                break;

            case "fone":
                $('<div/>', {
                    "class": "col-md-2 text-left",
                    text: "fone:  61 - " + val
                }).appendTo(bodyRow)
                break;

            case "condicao":
                var cond = $('<div/>', {
                    "class": "col-md-2 text-left",
                    text: val
                }).appendTo(bodyRow)
                elements[3] = cond;
                break;

            case "email":
                $('<a/>', {
                    "class": "col-md-2 text-left",
                    text: val,
                    href: "mailto:" + val
                }).appendTo(bodyRow)
                break;

            default:
                break;
            }
        }

    })
    $.each(elements, function (i, e) {
        $(e).appendTo(row)
    })
};

和sort_by就是这个（抓住了某个地方）：

var sort_by = function (field, reverse, primer) {
    var key = function (x) {
        return primer ? primer(x[field]) : x[field]
    };

    return function (a, b) {
        var A = key(a),
            B = key(b);
        return ((A < B) ? -1 : ((A > B) ? 1 : 0)) * [-1, 1][+ !! reverse];
    }
}

Answer 1

您可以使用$("#containerMaster").empty()中的jQuery方法.empty()清除父级的所有子级。

排序时，您通常不必创建全新的节点。您只需将现有节点移动到正确的顺序即可。我不明白你的代码中没有源代码的功能所以我不能提供更具体的方法来做到这一点，但排序通常不需要创建新的节点。

使用javaScript从容器中删除项目以显示新的排序顺序

1 个答案: