从属性创建数组；将它们添加到页面答案

【问题标题】：Create array from attributes; add them to the page从属性创建数组；将它们添加到页面
【发布时间】：2013-06-16 23:15:58
【问题描述】：

我有一个问题一直在绞尽脑汁，因为我对编程缺乏经验。我是托管图片库的网站的成员。当您查看包含画廊列表的页面时，每个画廊的图标内都有其下方的标签。

<div class="id4">
    <a href="..."><img src="..."></a>
    <div class="id44">
        <div class="tft" title="tag1, tag2"></div>
        <div class="tft" title="tag3"></div>
    </div>
    <div class="tags"></div>
</div>
<div class="id4">
    <a href="..."><img src="..."></a>
    <div class="id44">
        <div class="tft" title="tag1"></div>
        <div class="tft" title="tag2"></div>
    </div>
    <div class="tags"></div>
</div>

由于将鼠标悬停在每个图标上很麻烦，我想编写一个自定义脚本，将标签写入它们所属的图库下方的“标题”属性内。这是我所能得到的：

$(".id44").after('<div class="tags"></div>');
$(".id44").each(function() {
    var array = [];
    $(".tft").each(function() {
        var tags = $(this).attr("title");
        array.push(tags);
    });
    console.log(array);
});

它所做的只是将页面上每个标签的巨大列表打印到控制台，次数与画廊一样多。

【问题讨论】：

标签： jquery arrays each

【解决方案1】：

查找作为当前元素后代的.tft 元素：

$(this).find(".tft").each(function() {
    array.push(this.title);
});

$(".tft") 单独匹配具有tft 类的所有元素。

我会这样写：

$('.id44').each(function() {
    var tags = $(this).find('.tft').map(function() {
        return this.title;
    }).get();

    $('<div>', {
        'class': 'tags',
        'text': tags.join(', ')
    }).insertAfter(this);
});

.map(...).get() 只是编写代码的一种更短的方式，该代码将所有标签组成一个数组。

【讨论】：

这个功能完美，谢谢。我还有一个关于标签的小问题。其中一些附加了命名空间（例如：“namespaceX:tag1”“namespaceY:tag2”）如何从输出中删除它们？
@user1689634：只要this.title.split(':').slice(-1)

【解决方案2】：

问题是.tft 不限于您正在循环的当前.id44。使用"selector", this 会将结果限制为this-container。另外，我在右边.tag-div添加了如何添加标签。

$(".id44").after('<div class="tags"></div>');
$(".id44").each(function() {
    var array = [];
    $(".tft", this).each(function() {
        var tags = $(this).attr("title");
        array.push(tags);
    });
    $(".tags", this).html(array.join(','));
});

【讨论】：

我不知道"selector", this 是可能的，谢谢。这很有帮助。