Question

我有n个项目（html元素，vcard微格式），包含其他带内容的元素，每个元素代表一个商店并且有一个子元素（“.locality”），其中保存有关城市的信息，商店所在是。我想为每个原始城市制作一个部分，输出城市名称作为部分的标题，并在正确的部分下订购每个项目。这是我到目前为止的地方：

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

我不知道如何使用章节标题中的项目位置，然后将其命名为他们的部分。非常感谢您的任何建议。

Answer 1

我可以点击你的麻烦，你应该使用对象而不是大量的数组。更多功能。

这样的事情：

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

并链接到结果：

http://jsfiddle.net/99oup27k/

基于将子元素内容与目标标题内容进行比较的Javascript排序元素

1 个答案: