通过 jQuery 分离和清理数据属性中的标签答案

【问题标题】：Separating & cleaning up tags in data-attribute via jQuery通过 jQuery 分离和清理数据属性中的标签
【发布时间】：2013-02-26 14:32:14
【问题描述】：

我有一个项目列表，其中包含使用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 var 来修改 CSS 等，但 .split 函数似乎不想玩球。请指教！

【问题讨论】：

我不会用逗号分隔你的data-types。而是用空格分隔，因为这对于类来说是正常的。
<li sata-type="tag3"> 这个错字只是在示例中吗？会解释错误...
就此而言，如果您使用类而不是 data- 属性，则可以只使用 jQuery 选择器而不是自己解析 data。
对于您尝试添加的 data-id 属性：stackoverflow.com/questions/6827810/…
@Blazemonger 感谢您的建议。坚持上课有什么好处？我正在使用数据属性，以便我可以将内容与样式引用分开，因为我在列表项上使用了许多插件（用于排序的 LiveSearch 和流沙）

标签： javascript jquery split custom-data-attribute

【解决方案1】：

你注意到了吗：

<li sata-type="tag3">

是 sata 而不是 data 因此错误：

Uncaught TypeError: Cannot call method 'split' of undefined.

【讨论】：

哇哦。我完全错过了！这有点像O型！我在 JSFiddle 中有这个，这似乎可以解决问题。但是在我的本地（较大）文件中，问题仍然存在。据我所知，我总是引用data-type，还有什么会导致同样的问题吗？

【解决方案2】：

您实际上可以在数据标签中嵌入对象字面量。因此，如果您执行data-type='["tag3”, ”tag4”]'，那么.data('type') 将返回一个数组。

【讨论】：