我有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>');
}
});
我不知道如何使用章节标题中的项目位置,然后将其命名为他们的部分。 非常感谢您的任何建议。
答案 0 :(得分:0)
我可以点击你的麻烦,你应该使用对象而不是大量的数组。更多功能。
这样的事情:
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/