for循环中的for循环而不重复输出

Question

我正在动态引用api回调中的数据，但我仍然停留在获取一组数据以循环并正确显示结果。

以下是它应该如何显示的截图

很难解释它，但基本上你看到的一切都是动态引用的，包括可点击链接，它们是通过循环生成的。

我的问题是来自api的回调字符串有多个对象，我需要从中提取所有对象并在下面显示的集合中显示它们，这些也是动态生成的。

无论如何，如果有解决方案，我会尝试将其应用于真实代码。

- 这是我的真实代码 -

                    for (var i = 0; i < response.endpoints.length; i++) {
                var endpoint1 = response.endpoints[i];

                $response0.append('<div class="EndPoint"><a href="#"><h3>Endpoint ['+i+']</h3></a><div><h3>Protocols</h3>'+protocols.name+' '+protocols.version+'</div></div>');            
                }
                $('.EndPoint').on('click', function () {
                $('.EndPoint').find('div').hide();
                $(this).find('div').show();
                });

我需要以某种方式将此代码作为循环的一部分。我无法在jsfiddle中显示它，因为字符串来自api，但它分开工作：

                    for (var ii = 0; ii < endpoint1.details.protocols.length; ii++) {
                var protocols = endpoint1.details.protocols[ii];
                console.log(protocols);
                }

我已经在firebug中包含了回调字符串数据的图像。我只对名称和版本值感兴趣

Answer 1

您将在外部循环中添加链接，并在内部循环中的每次迭代中仅添加一个项目，使用set2[ii]来获取正确的字母：

var set1 = [1, 2, 3];
var set2 = ['a', 'b', 'c'];
for (var i = 0; i < set1.length; i++) {
    var set = $('<div class="set"><a href="#">set [' + set1[i] + ']</a></div>');
    $('#container').append(set);
    for (var ii = 0; ii < set2.length; ii++) {
        set.append('<div><b>letter:</b> ' + set2[ii] + '</div>');
    }
}

$('.set').on('click', function () {
    $('.set').find('div').hide();
    $(this).find('div').show();
});

演示：https://jsfiddle.net/Guffa/wfLkmpxx/6/

Answer 2

在第一个循环中，您需要创建div元素。然后，在第二个循环中，您需要创建列表项。在第二个循环之外，但仍然在第一个循环内，您需要将这些列表项追加到刚刚在第一个循环中定义的div元素。

我试图明确逻辑：https://jsfiddle.net/wfLkmpxx/8/

var set1=[1,2,3];
var set2=['a','b','c'];

for(var i=0;i<set1.length; i++){

    var div1 = $('<div class="set"><a href="#">set ['
        + set1[i] 
        + ']</a><div>');
    var sublinks ='';

    for(var ii=0;ii<set2.length; ii++){       
        sublinks +=  '<div><b>letter:</b> ' + set2[ii] + '</div>';        
    }

    div1.append(sublinks);
    $('#container').append(div1);
}


$('.set').on('click', function () {
    $('.set').find('div').hide();
    $(this).find('div').show();
});

Answer 3

您的for循环中存在一些问题。您必须为第一个循环中的每个集合（在第二个循环之前）创建一个新的jQuery元素，并在第二个循环中将每个字母附加到此元素。

var set1=[1,2,3],
    set2=['a','b','c'],
    $container =  $('#container'),
    $tempSet,
    $tempSetChilds;

for(var i=0;i<set1.length; i++){
    $tempSet = $('<div class="set"><a href="#">set ['+set1[i]+']</a><div></div>');
    $tempSetChilds = $tempSet.children('div');

    $container.append($tempSet);

    for(var ii=0;ii<set2.length; ii++){
        $tempSetChilds.append('<b>letter:</b> ' +set2[ii]+ '<br>');
    }
}

$('.set').on('click', function () {
    $('.set').find('div').hide();
    $(this).find('div').show();
});

在这个小提琴中查看：https://jsfiddle.net/wfLkmpxx/1/

Answer 4

您必须将JS更改为以下内容：

var set1=[1,2,3];
var set2=['a','b','c'];
for(var i=0; i<set1.length; i++){
    $('#container').append('<div class="set" id=' + i + '><a href="#">set [' + set1[i] + ']</a></div>');
    for(var ii=0; ii<set2.length; ii++){
        $('#' + i).append('<div><b>letter:</b> ' + set2[ii] + '</div>');
    }

    $('.set').on('click', function () {
        $('.set').find('div').hide();
        $(this).find('div').show();
    });
}

除了使其有效之外，我还使代码看起来正确。

Answer 5

检查此解决方案，希望它有所帮助：

var set1=[1,2,3];
var set2=['a','b','c'];
for(var i=0;i<set1.length; i++){
$('#container').append('<div class="set" id='+i+'><a href="#">set ['+set1[i]+']</a>');
for(var ii=0;ii<set2.length; ii++){
$('#'+i).append('<div><b>letter:</b> '+set2[ii]+ '<br></div></div>');
}


$('.set').on('click', function () {
$('.set').find('div').hide();
$(this).find('div').show();
});
}

你可以find it on jsfiddle

Answer 6

你把所有东西放在一个循环中。分开追加！

以下是一个有效的例子：JSFiddle

var set1 = [1, 2, 3];
var set2 = ['a', 'b', 'c'];
for (var i = 0; i < set1.length; i++) {
    $('#container').append('<div class="set" id="set' + set1[i] + '"><a href="#">set [' + set1[i] + ']</a><div id="letterwrap">');
    for (var ii = 0; ii < set2.length; ii++) {
        if (ii != 0) {
            $('#set'+set1[i]).find('#letterwrap').append('<br/>');
        }
        $('#set'+set1[i]).find('#letterwrap').append('<b> letter: </b> ' + set2[ii]);
    }
    $('#container').append('</div></div>');

    $('.set').on('click', function () {
        $('.set').find('#letterwrap').hide();
        $(this).find('#letterwrap').show();
    });
}