Javascript 有人能帮我擦干这些jQuery循环吗？

我仍然遇到需要重新声明所有新变量的问题，这些新变量都与optionSet在循环中的轮次有关

有人能帮我想一想，我该如何压缩它，这样我就不会在每次向函数添加新选项集时不断重复相同的代码了

---

编辑：$（'div.correlative'）元素对于每个元素都是完全不同的，因此它们不能用计数器递增。（例如，一个可能是$（'div.foo'）或$（'div.foo ul.bar'）

例如，您可以扩展jQuery，使其更易于重用：

$('wrapper').each(function(i){ // ... });

//扩展jquery
（函数（$）{
$.fn.redundantSee=函数（子选择器）{
返回此.find（'.options'）。每个（函数（）{
var self=$（此），
input=self.find（'input'），
title=self.find（'.title'）.text（），
value=input.val（），
source=self.find（'img'）.attr（'src'），
id=input.attr（'id'），
listItem=$（“
，{'value'：value，'id'：id}），
imageElement=$（'我将为包装器执行一个循环，并为每个包装器中的选项执行一个循环
我会对相应的DIV使用一个增量变量

// extend jquery
(function($){

    $.fn.redundantSee = function (subSelector) {

        return this.find('.options').each(function () {
            var self = $(this),
            input = self.find('input'),
            title = self.find('.title').text(),
            value = input.val(),
            source = self.find('img').attr('src'),
            id = input.attr('id'),
            listItem = $('<li/>', { 'value': value, 'id': id }),
            imageElement = $('<img/>', { 'src': source, 'title': title });

            $(subSelector).append(listItem);
            listItem.append(imageElement);
        });

    };

}(jQuery));

// and use it like this
$('.wrapper:eq(0)').redundantSee('div.corresponding1');
$('.wrapper:eq(1)').redundantSee('div.corresponding2');

函数冗余参见（）{
var i=0；
$（'.wrapper'）。每个（函数（）{
i++；
$（this）.find（'.options'）.each（function（）{
var self=$（此），
input=self.find（'input'），
title=self.find（'.title'）.text（），
value=input.val（），
source=self.find（'img'）.attr（'src'），
id=input.attr（'id'），
listItem=$（“
，{'value'：value，'id'：id}），
imageElement=$（“这属于中。”“如果我每个循环执行一个，并使用一个计数器……我仍然会遇到需要重新声明所有特定于该optionSet在循环中的轮次的新变量的问题”-这是为什么？对于您显示的代码，
'div.corresponding1'
位不是两个循环中唯一的区别吗？您可以使用计数器来处理它。您应该创建一个要重用的函数。参数应该是$elem（$（this））和$container（$（'div.correspondingx'））好的……很抱歉，我将其移到“div.encreating”上方，因为对于每个元素，都有一个名称完全不同的元素……很抱歉混淆了这一点。@user1798630如果您使用的是html5，您可以在每个包装上附加一个data-*属性来指定相应的名称实际上，我不能触摸那些包装器…它们是由服务器生成的，所以我只能用JavaScriptI来操作。我要到明天才能测试它，但是，我熟悉扩展jQuery和编写可重用函数来接受参数（这是我想解决这个问题的方法）.我很确定，通过这种方式扩展，我将能够实现。我要问的是，扩展jQuery是否比编写可重用的参数化函数有任何性能优势，或者它主要是链接和可重用性的最佳实践？更多的是关于最佳实践，我认为没有任何性能优势。仅供参考，这项工作s、 但是我只想提一下，第一个$（this）不应该用jQuery包装，当扩展它时，文档建议用iife（）包装，并且它还建议返回此链接：。但除此之外，这是一个非常好的解决方案，谢谢！感谢您的反馈。我更改了
此
部分，不确定这是否已经是jQuery并忘记了返回，是的，您是对的。但是我不认为IIFE有什么意义，因为所有内容都在函数中，应该是安全的？感觉到了吗ee编辑我的答案，我将接受更改。哦，欢迎使用SO。你应该有一个名字并上瘾，你将是这里的人的好帮手：）酷…我发送了编辑…我忘了注意到你可以在顶部立即返回“this”。iLife就在那里，以防其他库使用$，所以你传入$并用jQuery立即调用它。这是我使用的解决方案，它是一个非常有用的提醒，非常感谢。我已经上瘾了！
// extend jquery
(function($){

    $.fn.redundantSee = function (subSelector) {

        return this.find('.options').each(function () {
            var self = $(this),
            input = self.find('input'),
            title = self.find('.title').text(),
            value = input.val(),
            source = self.find('img').attr('src'),
            id = input.attr('id'),
            listItem = $('<li/>', { 'value': value, 'id': id }),
            imageElement = $('<img/>', { 'src': source, 'title': title });

            $(subSelector).append(listItem);
            listItem.append(imageElement);
        });

    };

}(jQuery));

// and use it like this
$('.wrapper:eq(0)').redundantSee('div.corresponding1');
$('.wrapper:eq(1)').redundantSee('div.corresponding2');

function redundantSee() {
    var i = 0;
    $('.wrapper').each(function(){
        i++;
        $(this).find('.options').each(function(){
            var self = $(this),
                input = self.find('input'),
                title = self.find('.title').text(),
                value = input.val(),
                source = self.find('img').attr('src'),
                id = input.attr('id'),
                listItem = $('<li/>', {'value': value, 'id': id }),
                imageElement = $('<img/>', {'src': source, 'title': title});

            $('div.corresponding' + i).append(nameListItem);
            listItem.append(imageElement);
        });
    });
}