Question

我有一个阵列：

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？

Answer 1

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

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',）。

Answer 2

只需跳过样式块索引，并在上一项的迭代中使用它们。你的代码几乎就在那里，我做了很少的修改，如下所示：

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>');
    }
})

Answer 3

DEMO

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');
});

在jQuery中迭代数组

3 个答案:

编辑：