Question

我的Jquery插件中有以下代码：

    return this.each(function(){
        $(this).removeAttr('src');
        new_src = generate_src();
        $(this).attr('src' , new_src);
    });

现在我有一个函数来检查数组中是否存在特定元素src属性，如果没有，它会将当前元素src添加到数组中，让我向您展示该函数：

  function get_prop(current){
        var current_src = current.attr('src');
        if ($.inArray(current_src , src_storage) === -1) {
            src_storage.push(current_src);
        }
        return src_storage.length;
    }

现在假设我在插件中执行以下操作：

return this.each(function(){
        total_images = get_prop($(this)); // this is the new line added , which calls the get_prop function
        $(this).removeAttr('src');
        new_src = generate_src();
        $(this).attr('src' , new_src);
    });

注意我是如何添加以下行的：

total_images = get_prop($(this));

此方法的问题：

每个函数实际上一次遍历每个元素，这意味着当我在每个函数内部调用下面的函数时：

total_images = get_prop($(this));

它只会针对当前元素执行，而不是继续执行下一组元素，WAHT i实际上希望它做的是，通过整个选定元素的集合，返回计数而不是执行剩余的剩余代码集。

那我做了什么：

我采取了以下方法，

    this.each(function(){
        total_images = get_prop($(this));
    });


    return this.each(function(){
        $(this).removeAttr('src');
        new_src = generate_src();
        $(this).attr('src' , new_src);
    });

    // function to check for images that maybe repeated .
    function get_prop(current){
        var current_src = current.attr('src');
        if ($.inArray(current_src , src_storage) === -1) {
            src_storage.push(current_src);
        }
        return src_storage.length;
    }

注意我是如何添加以下代码行的：

this.each(function(){
            total_images = get_prop($(this));
        });

现在它运作得很好，它做了我想要它做的事情，I.E，

为所有选定的元素调用get_prop函数。但不知何故，这似乎是一段冗余的代码，根本不是很整齐，我不确定一个经验丰富的程序员是否会采用这种方法，我对Jquery更新，我真正喜欢的是，如果我能写的话一个函数，里面本身有一个遍历所有元素的每个函数，但我不知何故只是不知道该怎么做。

Answer 1

我会尝试使我的答案比我的问题更清楚，

首先，我的问题是什么：

我的问题在于每个函数，特别是它一次迭代一个元素的事实。让我给你举个例子：

return this.each(function(){

                $(this).callsomefunction();
                // call some more functions
                // some more set of instructions
        });

现在看一下上面的代码，假设我真正想要的是每个函数执行以下代码行：

$(this).callsomefunction();

对于所有选定的元素，在移动到下一组指令之前。现在我该怎么做？

@abhitalks提供了一个实际解决我问题的小提琴：fiddle

这是我的简单版本：

我有以下功能：

function get_prop(current){
            var current_src = current.attr('src');
            if ($.inArray(current_src , src_storage) === -1) {
                src_storage.push(current_src);
            }
            return src_storage;
        }

现在我想写一个函数，当被调用时将为所有选定元素执行上述函数。

所以我写下了这个函数：

var execute_function = function(element , function_name){
            element.each(function(){
                val = function_name;
            });
            return val;
        }

现在终于在每个函数里面，我有这个：

return this.each(function(){
                store_val = execute_function($(this) , get_prop($(this)));
                store_val_length = store_val.length;
                $(this).removeAttr('src');
                new_src = generate_src();
                $(this).attr('src' , new_src);           
        });

所以代码总体如下：

var execute_function = function(element , function_name){
            element.each(function(){
                val = function_name;
            });
            return val;
        }


        return this.each(function(){

                store_val = execute_function($(this) , get_prop($(this)));
                store_val_length = store_val.length;
                $(this).removeAttr('src');
                new_src = generate_src();
                $(this).attr('src' , new_src);           
        });

        // function to check for images that maybe repeated .
        function get_prop(current){
            var current_src = current.attr('src');
            if ($.inArray(current_src , src_storage) === -1) {
                src_storage.push(current_src);
            }
            return src_storage;
        }

编写可重用的每个函数，遍历所有元素

1 个答案: