0

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

<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);
});

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

4

2 回答 2

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()只是一种编写所有标签数组的代码的更短的方法。

于 2013-06-16T23:19:04.973 回答
1

问题在于，.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(','));
});
于 2013-06-16T23:20:22.567 回答