JQuery - 有没有办法减少对 dom 的调用

Question

我有这个jquery函数

    function update_prices(that, current_id, quantity) {
         //that == $(this)
        var wrapper = that.parents(".wrapper");
        var standard = wrapper.find(".prettyCheckbox small:eq(0)").parents("span").parents("label").prev("input").val();
        var professional = wrapper.find(".prettyCheckbox small:eq(1)").parents("span").parents("label").prev("input").val();
        var premium = wrapper.find(".prettyCheckbox small:eq(2)").parents("span").parents("label").prev("input").val();
        $.get("/shop_possystems/index.php?route=module/cart/ajax_get_individual_prices&standard_id=" + standard + "&professional_id" + professional + "&premium_id" + premium + "&quantity" + quantity;
            function(data) {
                var standard_price = data[0];
                var professional_price = data[0];
                var premium_price = data[0];
        });
        wrapper.find(".prettyCheckbox small:eq(0)").text(standard_price);
        wrapper.find(".prettyCheckbox small:eq(1)").text(professional_price);
        wrapper.find(".prettyCheckbox small:eq(2)").text(premium_price);
        return true;
    }

我觉得我在 dom 上调用相同的元素比我应该的要多......有没有人能想出更好的方法来实现我想要的而不进行所有这些调用

Answer 1

您可以缓存 PrettyCheckBox 项目:

function update_prices(that, current_id, quantity) {

    //that == $(this)

    var $wrapper = that.parents(".wrapper"),
        $prettyCheckBox0 = $wrapper.find(".prettyCheckbox small:eq(0)"),
        $prettyCheckBox1 = $wrapper.find(".prettyCheckbox small:eq(1)"),
        $prettyCheckBox2 = $wrapper.find(".prettyCheckbox small:eq(2)"),
        standard = $prettyCheckBox0.parents("span").parents("label").prev("input").val(),
        professional = $prettyCheckBox1.parents("span").parents("label").prev("input").val(),
        premium = $prettyCheckBox2.parents("span").parents("label").prev("input").val();    

    $.get("/shop_possystems/index.php?route=module/cart/ajax_get_individual_prices&standard_id=" + standard + "&professional_id" + professional + "&premium_id" + premium + "&quantity" + quantity,
        function(data) {
            var standard_price = data[0];
            var professional_price = data[0];
            var premium_price = data[0];
    });

    $prettyCheckBox0.text(standard_price);
    $prettyCheckBox1.text(professional_price);
    $prettyCheckBox2.text(premium_price);

    return true;
}

此外，我还修复了一个错误。您有 quantity;，它应该是 quantity,。