Question

向页面添加jQuery元素数组的最佳方法是什么？

我知道如果我添加直接的HTML标记，那么它们应该在数组中收集在一起，然后附加数组。这是最快的方法。但是我有一组jQuery元素，它们上面创建了事件，因此我不能只将字符串连接在一起。

示例：

        function displayCommentActions(actions) {
            var html = [];
            module.$element.find('.comments .actions li').remove();
            $.each(actions, function(key, value) {
                html.push($('<li class="' + key + '"><a href="#">' + value.name + '</a></li>').bind({
                    click: function(event) {
                        alert('found click');
                    }
                }));
            });
            $.each(html, function(count, item) {
                module.$element.find('.comments .actions').append(item);
            })
        };

这很难看，因为它需要两个循环。一个用于创建jQuery对象，另一个用于将它们输出到页面。如何改进我的代码？

Answer 1

@efritz，对每个列表项执行.remove（）都很慢而且很昂贵，快速擦除列表项会是.empty（）。

@Samuel你无法避免在这里循环。 .append（）接受一个字符串（html）或一个jquery对象。它不能使用jquery对象数组。

var actionsList = module.$element.find('.comments .actions');
actionsList.empty() // Remove all contents of our <UL>
$.each(actions, function(class, value) {
    var listItem = $('<li />').addClass(class) // Create our <li> and add our class
        .append('<a href="javascript:void(0);">' + value.name + '</a>') // Add our link
        .click(function() { // Click bind event
            alert('Clicked item');
        });

     actionsList.append(listItem); // Add our <li> to our <ul>

 }

这可能只是你想要塞缪尔这么小，这至少比你的双循环有所改善。

Answer 2

这样的事情不起作用吗？

function displayCommentActions(actions) {
    var target = module.$element.find('.comments .actions li')
    target.remove();

    $.each(actions, function(k, v) {
        var item = $('<li />').addClass(key);

        var link = $('<a />')
            .attr('href', 'javascript:void(0);')
            .html(value.name)
            .click(function() {
                alert('found click');
            });

        elem.append(item);
        target.append(item);
    }
}

另外，请记住，重复的选择器可能很昂贵 - 如果可能的话，存储它们。

将jQuery元素数组插入页面的最佳方法

2 个答案: