CODEWITHSUNDEEP
jquerymultidimensional-array
user2653332
user2653332

Reputation: 3

Iterate array in jQuery

I hav an array:

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

that I need to itterate over and create a label eg

<div>North America</div>

then position it using the object in the array

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

I keep getting lost in the iterations using this 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();
});

Any help much appreciated.

when I modify to this:

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

its almost there, but I get no top position in the style attribute, and it still itterates in error, I get 3 elements then 2 then 1??

Upvotes: 0

Views: 104

Answers (3)

MDEV
MDEV

Reputation: 10838

Just skip the style block indexes and use them from within the iteration of the previous item. Your code is very nearly there, and I have made very few alterations as seen below:

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

Upvotes: 0

Guffa
Guffa

Reputation: 700322

You can't iterate the array as items, because every other item is a city name or a position. You have to iterate the items in pairs. The jQuery each method doesn't support that, so just use a regular loop.

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

Edit:

You should put the div that you create in a variable, so that you can append elements to that specific element. If you append to $('.map-label') you will be appending the same elements to all labels created so far.

Fixed a typo in the code ('px,' should be 'px',).

Upvotes: 4

Tushar Gupta - curioustushar
Tushar Gupta - curioustushar

Reputation: 57095

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

Upvotes: 0

Related Questions