基于比较子元素内容和目标标题内容的Javascript排序元素

Question

I have n amount of items (html elements, vcard microformat), containing other elements with contents, each element represents a store and has a child element (".locality") where is kept information about a city, where the store is. I want to make a section for every original city, output city´s name as a heading of section and order each item under correct section. This is where I have gone so far:

http://jsfiddle.net/eliasondrej/0zqhpfLn/1/

HTML:

 <table class="vcard">
    <tr class="info">
    <td>
    <h3 class="fn org">some text </h3>
    </td>          
        <td>
          some text
      </td>
      <td>
  <p class="addr">
   <span class="locality">New York </span> <br />
          </p>
      </td>
    </tr>
</table>


<table class="vcard">
    <tr class="info">
       <td>
         <h3 class="fn org">some text </h3>
      </td>          
        <td>
          some text
      </td>
      <td>
  <p class="addr">
   <span class="locality">Paris </span> <br />
          </p>
      </td>
    </tr>
</table>

<table class="vcard">
    <tr class="info">
       <td>
         <h3 class="fn org">some text </h3>
      </td>          
        <td>
          some text
      </td>
      <td>
  <p class="addr">
   <span class="locality">Rome </span> <br />
          </p>
      </td>
    </tr>
</table>

<table class="vcard">
    <tr class="info">
       <td>
         <h3 class="fn org">some text </h3>
      </td>          
        <td>
          some text
      </td>
      <td>
  <p class="addr">
   <span class="locality">Berlin </span> <br />
          </p>
      </td>
    </tr>
</table>
</div>

jQuery:

jQuery(document).ready(function() {
    var prodejny = [];
    var localityTexts = [];

    jQuery(".vcard .locality").each(function() {
         localityTexts.push(jQuery(this).text() );
    });
    jQuery(".vcard").each(function() {
         prodejny.push(jQuery(this).html() ); 
    });
    var localities = [];
    for (var i=0; i<localityTexts.length; i++) {
        var locality = localityTexts[i];
        if (localities.indexOf(locality) === -1) {
            localities.push(locality);
        }
    }
    localities.sort();
    for (i = 0; i < localities.length;i++) {
        jQuery('.item-page').append( '<div class="lokalita"><h2> ' + localities[i] + '</h2><div class="prodejny-v-lokalite"> </div></div>');
    }
});

I don´t know how to campare Item´s location with that in section heading and then order it to their section. Thank you much for any advice.

Answer 1

As I can click your trouble, you should use objects instead of lots of Arrays. Be more functionality.

Something like this:

    var $page = $('.item-page');

    $('.vcard').map(function (i, el) {
        var $vcard = $(el);
        return {
            label: $.trim($vcard.find('.locality').text()),
            order: i + 1 // Coz we start count from 0
        };
    }).sort(function (a, b) {
        return a.label > b.label;
    }).each(function (i, locality) {
        $page.append('<div class="lokalita"><h2> ' + locality.label + '</h2><div class="prodejny-v-lokalite">'+ locality.order + '</div></div>');
   });

And link to result:

http://jsfiddle.net/99oup27k/