Question

我想在点击按钮时添加一个选择字段。选项的值是$ all_cs，由Yii Framework创建（约7k项目）。

<div class="cos-input">
    <div id="cos_container"></div>
    <span class='add-input cs_name' href="#" name="cs_name" onclick='addFields_cos()' style="border: solid 1px; padding: 3px;">Add COURSES</span>
</div>

选项元素内容：

$all_cs =  $form->dropDownList($model, 'cos[n]', $allCourses, array('prompt'=>''));
$pos = strpos($all_cs, "<option");
$rpos = strrpos($all_cs, "</option>");
$all_cs = substr($all_cs, 0, $rpos+9);
$all_cs = substr($all_cs, $pos, strlen($all_cs) - $pos);
$all_cs = str_replace("\n", "", $all_cs);

我有两种方式：

1 - 使用Js：

function addFields_cos(){
    var cos_container_parent = document.getElementById('cos_container');

    var div = document.createElement("div");
    div.name = "div_rm";
    cos_container_parent.appendChild(div);

    var new_cos = document.createElement("select");
    new_cos.name = 'new_courses[]';
    div.appendChild(new_cos);
    new_cos.innerHTML = '<?php echo $all_cs; ?>';

    div.innerHTML += "<span class='delete_div' href='#'> delete </span>";

    div.appendChild(document.createElement("br"));
    div.appendChild(document.createElement("br"));
}

2 - 使用Jquery：

$(document).ready(function(){
    $(".cs_name").click(function(){
        $("#cos_container").append("<div><select name='new_courses[]'>");
        $("#cos_container").append("</select></div><br>");
        $('#cos_container select').append('<?php echo $all_cs; ?>');
        //$('#cos_container div').append("<span class='delete_div' href='#'> delete </span>");
    });
});

使用Js时，添加多个字段时字段添加速度非常快，时间常数增加。

但是当使用JQuery时，字段加速较慢，并且添加尽可能多的文件。当有超过10个字段时，时间是任何秒完成。

我需要帮助才能得到答案：

1 - 添加多个字段时如何使用JQuery更慢而不是常量？

2 - 如何更快地改变我的JQuery功能？在这种情况下应该使用JQuery吗？

（抱歉，我的英语不好）

Answer 1

append（）比单个html（）/ text（）更重要。

下面的代码有望加速jquery版本：

$(document).ready(function(){

    $(".cs_name").click(function(){
        $("#cos_container").html(generateContent());
    });

    function generateContent() {

        return  '<div>' +
                '<select name="new_courses[]">' +
                '<?php echo $all_cs; ?>' +
                '</select>' +
                '<span class="delete_div" href="#">delete</span>' +
                '</div><br>';
    }
});

添加多个选择框：

JSbin prototype，它似乎比原始代码快得多？正如其他评论中所提到的那样，选择器查找是瓶颈。

$(document).ready(function(){

  $(".cs_name").click(function(){
        $("#cos_container").append(generateContent());
    });

    function generateOptionsion() {

        return  '<div>' +
                    '<select name="new_courses[]">' +
                        '<?php echo $all_cs; ?>' +
                    '</select>' +
                    '<span class="delete_div" href="#">Delete</span>' +
                '</div><br>';
    }

});

Answer 2

每次执行$(selector)时，都必须搜索DOM以查找匹配的元素。这是一个缓慢的过程，因此总是寻找最小化DOM交互次数的方法。

在这方面，jQuery方法链接可以非常有效。

例如：

$(document).ready(function(){
    $(".cs_name").click(function() {
        $("#cos_container")
            .append("<div><select name='new_courses[]'></select></div><br/>");//ensure all HTML fragments are well formed and complete at the point they are inserted.
            .find("select")
            .append('<?php echo $all_cs; ?>');
    });
});

这会更快但可能仍然没有您的POJS代码那么快。

Answer 3

这就是大多数新javascript / jquery开发人员可能存在的误解。

让我说清楚：

jQuery 是一个 javascript 库，所以无论你在 jQuery 中写过什么，它都会运行特定的原始 javascript 间接的功能。因此，更像是 jQuery 代码会调用与addFields_cos类似的内容。
jQuery lib非常容易理解，并且作为开发人员编写代码，它还附带了许多可用于遍历DOM结构的实用程序函数，这可能很繁琐。原始 javascript 。我主要更喜欢 jQuery lib，因为它支持AJAX功能，这非常容易（与原始javascript相比）来编写和管理远程调用。

作为一个开发人员，它依赖于你决定使用什么时，如果它只是在客户端的一些简单的事件处理，那么我会说不需要jQuery。但如果它比处理事件更复杂，比如遍历dom结构或使用一些主要依赖于jQuery并需要AJAX功能的第三方库，那么请使用 jQuery 。

快乐编码：）

附加元素时，jQuery比JavaScript慢得多

3 个答案: