0

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

- 提出请求

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

- 按一个属性排序

创建 DOM 元素并 appendsTo 正确的父级。

到目前为止一切顺利。

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

我做了：

//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 正确值填充面板。如果名称根据带有名称标签的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));
            }
        };

函数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];
    }
}
4

1 回答 1

1

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

排序时，您通常不必创建全新的节点。您可以将现有节点移动到正确的顺序。我不了解您的代码中没有源代码的函数，因此我无法提供更具体的方法来做到这一点，但排序通常不需要创建新节点。

于 2013-10-19T04:09:02.607 回答