Разделение и очистка тегов в атрибуте данных через jQuery

У меня есть список элементов, которые будут содержать тег с использованием атрибута 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/

Я могу использовать ту же переменную items для изменения CSS и т. д., но функция .split, похоже, не хочет играть в мяч. Пожалуйста, порекомендуйте!


person Sheixt    schedule 26.02.2013    source источник
comment
Я бы не стал разделять ваши data-type запятыми. Вместо этого разделяйте пробелами, так как в любом случае это нормально для классов.   -  person Blazemonger    schedule 26.02.2013
comment
<li sata-type="tag3"> это опечатка только в примере? Объяснили бы ошибку...   -  person Stefan    schedule 26.02.2013
comment
В этом отношении, если бы вы использовали классы вместо атрибутов data-, вы могли бы просто использовать селекторы jQuery вместо того, чтобы самостоятельно анализировать data.   -  person Blazemonger    schedule 26.02.2013
comment
Для атрибута data-id, который вы пытаетесь добавить: stackoverflow.com/questions/6827810/   -  person ivodvb    schedule 26.02.2013
comment
@Blazemonger спасибо за предложение. Какая польза от посещения занятий? Я использую атрибуты данных, чтобы отделить содержимое от своих ссылок на стили, поскольку я использую ряд плагинов в элементе списка (LiveSearch и Quicksand для сортировки)   -  person Sheixt    schedule 26.02.2013
comment
С классами вы можете получить массив совпадающих элементов с помощью $('.article-wrap li.tag3').get(). Я не считаю это неправильным использованием классов, поскольку (а) вы можете добавить столько классов, сколько захотите, и (б) вы не храните фактические данные как класс, а просто произвольное имя.   -  person Blazemonger    schedule 26.02.2013


Ответы (2)


Ты заметил:

<li sata-type="tag3">

Является ли sata вместо data, следовательно, ошибка:

Uncaught TypeError: Cannot call method 'split' of undefined.
person kzhen    schedule 26.02.2013
comment
Ух ты. Я полностью пропустил это! Это немного типа-о! У меня есть это в JSFiddle, и это, похоже, решает проблему. Однако в моем локальном (большем) файле проблема все еще существует. Из того, что я вижу, я всегда ссылаюсь на data-type, есть ли что-нибудь еще, что может вызвать ту же проблему? - person Sheixt; 26.02.2013

Фактически вы можете встраивать литералы объектов в теги данных. Итак, если вы сделаете data-type='["tag3”, ”tag4”]', то .data('type') вернет массив.

person Andrew Kirkegaard    schedule 26.02.2013