jquery - 具有多个元素的变量选项的html（）？答案

【问题标题】：jquery - html() of variable option with multiple elements?jquery - 具有多个元素的变量选项的html（）？
【发布时间】：2014-08-14 09:43:56
【问题描述】：

我不太确定我这样做是否正确，因为我不是 jquery 专业人士。但这是事实：我需要将 kontinent[i].content 中的所有#box 作为 html 代码添加到 #content div 中的前一个 html 中。起初这似乎工作得很好，但是当我仔细观察时，只添加了第一个元素（例如 europe.content 中的“#box1”，我不明白为什么。

我是否必须遍历 kontinent[i].content 选择的元素？

这是我的代码：

    $(document).ready( function() {
    var europa = {
        content: $( '#box1,#box5,#box6,#box7,#box8,#box9,#box10,#box13,#box18,#box19,#box20,#box21,#box23,#box25,#box27,#box28,#box32,#box33,#box37' ),
        name: "europa"
        };
    var usa1 = {
        content: $( '#box38' ),
        name: "usa1"
        };
    var usa2 = {
        content: $( '#box3,#box17' ),
        name: "usa2"
        };
    var afr = {
        content: $( '#box29' ),
        name: "afr"
        };
    var asi = {
        content: $( '#box4,#box11,#box12,#box14,#box15,#box16,#box22,#box24,#box26,#box30,#box31,#box34,#box35,#box36' ),
        name: "asi"
        };
    var aus = {
        content: $( '#box2' ),
        name: "aus"
        };

    var kontinent = [europa, usa1, usa2, afr, asi, aus];
    var content = $('#content');
    var precon = content.html();
    var i = 0;

    $('#world-weltkartelinks a').click( function( event ) {
        event.preventDefault();
        i = 0;

        while ( i <= 5 ) {
            if ($(this).attr('data-region') == kontinent[i].name) {
                content.html(precon + kontinent[i].content.html());
            };
            i++;
        };
    });
  });

【问题讨论】：

标签： javascript jquery arrays variables options

【解决方案1】：

根据您可以更改代码设置的程度，拥有一个主对象可能会更好，首先消除循环的需要，类似于他的：

var regions = {
    europa: {
        content: $('#box1,#box5,#box6,#box7,#box8,#box9,#box10,#box13,#box18,#box19,#box20,#box21,#box23,#box25,#box27,#box28,#box32,#box33,#box37')
    },
    usa1: {
        content: $('#box38')
    }
};

现在的好处是您可以访问 kontinent 而无需循环访问它。但是，要获取 content 属性中所有选择器的 html 内容，您仍然需要一个循环。类似这样：

var kontinent = regions;
var content = $('#content');
var precon = content.html();

$('#world-weltkartelinks a').click( function( event ) {
    var region = $(this).attr('data-region')

    if (kontinent[region]) { // no more looping needed
        var allBoxes = '';

        $(kontinent[region].content).each(function () { // still needs to loop to extract all HTML values for all selectors.
            return allBoxes += this.innerHTML;
        });

        content.html(precon + allBoxes);
    }
}

DEMO - 使用对象而不是数组

演示使用的是缩小版本，因为我没有您的实际 HTML 来查看使用主对象的工作演示：

var regions = {
    europa: {
        content: $('#box1,#box5,#box6,#box7,#box8,#box9,#box10,#box13,#box18,#box19,#box20,#box21,#box23,#box25,#box27,#box28,#box32,#box33,#box37')
    },
    usa1: {
        content: $('#box38')
    }
};

var kontinent = regions;
var content = $('#content');
var precon = content.html();

var region = 'europa';
if (kontinent[region]) {
    var allBoxes = '';

    $(kontinent[region].content).each(function () {
        return allBoxes += this.innerHTML;
    });

    content.html(precon + allBoxes);
}

【讨论】：

感谢您的回答，向我展示了我不知道的东西。但我仍然得到这个错误，只附加了元素的第一个框（例如欧罗巴）？就像只有 #box1 被附加到内容中一样，其余的都没有。
@samtun：Working with Objects 上的这个 MDN 页面显示了如何使用点符号访问对象，即：object.propertyName 或作为“关联数组”访问它们，即：object["propertyName" ]，因为每个对象属性都与一个字符串值相关联。关于丢失的附加数据，我没有意识到你想要所有这些，我的错。对于那个很抱歉。在这种情况下，可能无法避免循环。不过我再看看。
好的，但首先感谢您！这大大减少了我的代码，让我更深入地研究对象的使用。
@samtun：我希望我理解你的意思。我编辑了代码以获取在匹配的大陆的content 属性中指定的所有元素选择器的html 内容。您可以根据需要改进她的代码。
我更改了对象数据，只是在数组conent: [1,2,3...] 中为它们提供了数字，然后使用content.append($('#box' + regions[region].content[o]).html()); 循环遍历，这样就成功了。我想在这里发布这个作为答案，但由于现在缺乏声誉点，我不允许这样做。无论如何，如果有人对此有改进，请告诉我，我还在学习。感谢弗朗索瓦，现在看到你的编辑，似乎也有效。太棒了！

【解决方案2】：

var $current = $(this);
    $.each(kontinent,function(idx,element){
      if ($current.attr('data-region') == element.name) {
                    content.append(element.content.html());
      }
    };

请注意，您可以使用append 来保留您的初始内容，而无需再次插入。

【讨论】：