0

我有一个数组：

var positions = ["north-america",{"top":512,"left":0},"central-america", {"top":512,"left":85},"united-kingdom",{"top":512,"left":180}];

我需要迭代并创建一个标签，例如

<div>North America</div>

然后使用数组中的对象定位它

<div style="top:512; left:0">North America</div>

我一直迷失在使用这个 jQuery 的迭代中。

$.each(positions, function (i, object) {
    $('<div/>', {
        class: 'map-label dragee ' + object,
        region: object
    }).appendTo('#front-end-map');

    $('#labels').append('<h3>' + object + '</h3>');
    $('#labels').append('<span><a href="#">Read More</a></span>').drags();
});

非常感谢任何帮助。

当我对此进行修改时：

for (var i = 0; i < positions.length; i += 2) {
var name = positions[i];
var pos = positions[i + 1];
     $('<div/>', {
    class: 'map-label ' + name,
    region: name
    }).css({
    top: pos.top + 'px,',
    left: pos.left + 'px'
}).appendTo('#front-end-map');

$('.map-label').append('<h3>' + name + '</h3>');
$('.map-label').append('<span><a href="#">Read More</a></span>').drags();
}

它几乎就在那里，但我在样式属性中没有获得最高位置，并且它仍然错误地迭代，我得到 3 个元素，然后是 2，然后是 1？

4

3 回答 3

4

您不能将数组作为项目进行迭代，因为其他所有项目都是城市名称或位置。您必须成对地迭代这些项目。jQueryeach方法不支持，所以只需使用常规循环。

for (var i = 0; i < positions.length; i += 2) {
  var name = positions[i];
  var pos = positions[i + 1];
  var div = $('<div/>', {
    class: 'map-label dragee ' + name,
    region: name
  }).css({
    top: pos.top + 'px',
    left: pos.left + 'px'
  });
  div.appendTo('#front-end-map');

  div.append('<h3>' + name + '</h3>');
  div.append('<span><a href="#">Read More</a></span>').drags();
}

编辑：

您应该将div您创建的内容放在一个变量中，以便您可以将元素附加到该特定元素。如果您追加，$('.map-label')您将向迄今为止创建的所有标签追加相同的元素。

修正了代码中的一个错字（'px,'应该是'px',）。

于 2013-08-05T13:56:03.707 回答
0

只需跳过样式块索引并在前一项的迭代中使用它们。你的代码就快到了，我做了很少的改动，如下所示：

var positions = ["north-america",{"top":181,"left":153},"central-america",{"top":266,"left":196},"united-kingdom",{"top":139,"left":418}];

slugToText = function(text) {
    text = text.replace(/-/g,' ');
    text = text.replace(/(\w+)/g,function(m1,m2) {
        return m2.substr(0,1).toUpperCase() + m2.substr(1)
    });
    return text;
}

$.each(positions,function(i,item) {
    if(i%2==0) //Only do indexes 0,2,4.....
    {
        var mydiv = $('<div/>', {
            class: 'map-label dragee '+item
            ,region: item
        })
        .css(positions[i+1]) //Use the next item along for the styles
        .appendTo("#front-end-map");

        $(mydiv).append('<h3>' + slugToText(item) + '</h3>');
        $(mydiv).append('<span><a href="#">Read More</a></span>');
    }
})
于 2013-08-05T13:59:07.157 回答
0

演示

var positions = [{"place":"north-america","top":512,"left":0},{"place":"central-america","top":512,"left":85},{"place":"united-kingdom","top":512,"left":180}];
$.each(positions, function (i, object) {
    console.log(object['top'],i);
    $('<div/>', {
        class: 'map-label dragee ' + object['place'],
        region: object['place'],
        top:object['top']+'px',
        left:object['left']+'px'
    }).appendTo('#front-end-map');
});
于 2013-08-05T14:02:14.523 回答