data-type
属性を使用したタグを含むアイテムのリストがあります。アイテムをループして、配列内の各タグを取得しようとしています。リスト項目に複数のタグ (コンマで区切られたもの) がある場合、タグを分割して空白をクリーンアップしたいと考えています。
ここに私のHTMLがあります:
<div class="article-wrap">
<ul class="articles">
<li sata-type="tag3"> <a href="#">LTE opens vast new business and revenue opportunities. Here's how to get ready.</a>
</li>
<li data-type="tag3"> <a href="#">Bringing NFC into the Digital Home</a>
</li>
<li data-type="tag3, tag4"> <a href="#">Keep Up with Rapidly-changing Wi-Fi Standards, Techniques and Markets</a>
</li>
<li data-type="tag1"> <a href="#">Technicolor Professional Services help NSPs reduce software vulnerability</a>
</li>
<li data-type="tag2, tag3"> <a href="#">Our New Satellite/terrestrial HD Set-top Box Provides a Smooth Path to HDTV.</a>
</li>
</ul>
</div>
そして、ここに私のJSがあります:
$(function () {
var items = $('.article-wrap li'),
itemsByTags = {};
// Looping though all the li items:
items.each(function (i) {
var elem = $(this),
tags = elem.data('type').split(',');
// Adding a data-id attribute
elem.attr('data-id', i);
$.each(tags, function (key, value) {
// Removing extra whitespace:
value = $.trim(value);
if (!(value in itemsByTags)) {
// Create an empty array to hold this item:
itemsByTags[value] = [];
}
// Each item is added to one array per tag:
itemsByTags[value].push(elem);
});
});
});
残念ながらUncaught TypeError: Cannot call method 'split' of undefined が発生します。ここでこれを見ることができます:http://jsfiddle.net/94UUF/2/
同じ var を使用してitems
CSS などを修正できますが、.split
関数はボールをプレーしたくないようです。お知らせ下さい!