jQuery: copy class information chronology to other classes

I'm using a profile wp plugin connections. This plugin allows you to make templates. Connections outputs the data about the city the persons is located in a class called "locality".

You can't call this class开发者_如何学编程 directly(in the template) only the general address information. So what i like to achieve is to gap the content of the class "locality" and copy it to a place where only the city should be stated.

I can get jQuery to copy the content of the class but sins there are more classes with content all city's are displayed in all the classes.

example:

output on one page, displaying 3 profiles(this is how the plugin does is with the comma):

<div class="locality">New York,<div> //profile 1
<div class="locality">Boston,<div>  //profile 2
<div class="locality">New York,<div> //profile 3

This city should be chronology copy to here:

<p class="city-top-menu"></p>  //profile 1
<p class="city-top-menu"></p> //profile 2
<p class="city-top-menu"></p> //profile 3

The incomplete jQuery code so far:

$(function() { 
var city = $('.locality').text().slice(0, - 1);

$('.city-top-menu').each(function() {   

    //$('.city-top-menu').append(" "+city);

    });
});

May be it get more clear by showing the html resold i like to achieve:

<p class="city-top-menu">New York</p>  //profile 1
<p class="city-top-menu">Boston</p> //profile 2
<p class="city-top-menu">New Tork</p> //profile 3

Live Example

var menus = $(".city-top-menu");


$(".locality").each(function(i, val) {
    menus.eq(i).text($(val).text());
});