基于比较子元素内容和目标标题内容的Javascript排序元素
Javascript ordering elements based on comparing child element content with target heading content
我有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>');
}
});
我不知道如何将物品的位置放在章节标题中,然后将其订购到他们的章节。非常感谢你的建议。
因为我可以点击你的问题,你应该使用对象而不是很多数组。更多的功能。
类似这样的东西:
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/
相关文章:
- HighCharts长标题文本在某些元素上重叠
- 为li元素添加标题
- <标题>插入SVG的元素不起作用
- 克隆元素时更改标题的文本
- 如何使动态树标题中的span元素可点击
- 如何解析html以删除元素并只返回其位置的标题
- 基于比较子元素内容和目标标题内容的Javascript排序元素
- 如何为CheckedMultiSelect的每个元素添加不同的标题
- 为什么.attr('title')正在抓取前一个元素'的标题
- 如何仅切换标题元素而不切换列表
- jQuery / Javascript方法获取当前页面的标题,将其与字符串匹配,将类分配给该特定元素
- 如何在标题中的所有元素中淡入淡出
- 引导选项卡标题元素中的复杂 html
- 修复了标题导航和滚动到()下一个/上一个元素
- 无法将脚本元素附加到标题
- 使用 javascript 获取元素标题
- 无法使用
导航到正确的元素,因为页面标题窗格已修复(冻结) - Ajax 对 xml 页面的响应以获取标题元素不起作用
- W3C验证器:元素头缺少子元素标题的必需实例
- 如何访问Json中的元素标题