Question

由于我对编程缺乏经验，因此我遇到了一个问题，这个问题一直困扰着我的大脑。我是一个托管图片库的网站的成员。当您查看包含图库列表的页面时，每个图库都会在图标内部显示标记。

<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>

由于将鼠标悬停在每个图标上是一件很麻烦的事情，我想编写一个自定义脚本，将标记写在其所属图库下方的“title”属性中。这是我能得到的：

$(".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);
});

所有这一切都是将页面上每个标签的巨大列表打印到控制台的次数与图库一样多。

Answer 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()只是编写构成所有标记数组的代码的一种较短方式。

Answer 2

问题是.tft不限于您正在循环的当前.id44。使用"selector", this会将结果限制为this - 容器。另外，我已添加了如何在右侧.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(','));
});

从属性创建数组;将它们添加到页面中

2 个答案: