Question

This is my input i have like 120 lines of code like this one and the city names are not limited, there are 20 cities at this moment but it might go up like 40 or even 60.

<a href="somelink" rel="city3">Name1</a><br>
<a href="somelink" rel="city2">Name2</a><br>
<a href="somelink" rel="city1">Name4</a><br>
<a href="somelink" rel="city4">Name6</a><br>
<a href="somelink" rel="city3">Name5</a><br>
<a href="somelink" rel="city1">Name3</a><br>
<a href="somelink" rel="city4">Name7</a><br>
<a href="somelink" rel="city1">Name8</a><br>

and i need this output to group them and give a title named the city they belong

<h1>city1</h1>
<div class="gather">
<a href="somelink" rel="city1">Name4</a><br>
<a href="somelink" rel="city1">Name3</a><br>
<a href="somelink" rel="city1">Name8</a><br>
</div>
<h1>city2</h1>
<div class="gather">
<a href="somelink" rel="city2">Name2</a><br>
</div>
<h1>city3</h1>
<div class="gather">
<a href="somelink" rel="city3">Name1</a><br>
<a href="somelink" rel="city3">Name5</a><br>
</div>
<h1>city4</h1>
<div class="gather">
<a href="somelink" rel="city4">Name6</a><br>
<a href="somelink" rel="city4">Name7</a><br>
</div>

i believe wrapper is the thing im looking for

Answer 1

You can select each of the sets of elements by their rel attribute, then append them into another structure. If you .append() an element somewhere that already exists in the DOM, it will be moved:

$(function () {

    //get all the links that have a `rel` attribute that starts with `city`
    var $links = $('#container').children('a[rel^="city"]'),

        //setup an output variable to sort the links
        output = {};

    //iterate through each of the links and add them to an object sorted by `rel` attribute
    $.each($links, function (index, element) {

        //get the number after `city` in the `rel` attribute
        var cityNumber = $(element).attr('rel').substr(4);

        //if this index does not exist, make it
        if (typeof output[cityNumber] == 'undefined') {
            output[cityNumber] = [];
        }

        //push element into proper index
        output[cityNumber].push(element);
    });

    //remove the container's HTML
    $('#container').empty();

    //loop through the `output` object
    $.each(output, function (index, obj) {

        //append a new set of links for each index (sorted by `rel` attribute)
        $('#container').append('<h1>city' + index + '</h1>').append($('<div />', { class : 'gather' }).append(obj));
    });
});​

Here is a demo: http://jsfiddle.net/d2FKS/1/