Create array from attributes; add them to the page

Question

I've got a problem that's been racking my brain since I'm rather inexperienced with programming. I'm a member of a website that hosts image galleries. When you view a page with a list of galleries, every gallery has tags underneath it inside of icons.

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

Since hovering over each icon is a big hassle, I wanted to write a custom script that writes the tags inside of the "title" attribute underneath the gallery they belong to. This is as far as I could get:

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

All it does is print a gigantic list of every single tag on the page to the console as many times as there are galleries.

Blender · Accepted Answer · 2013-06-16 23:19:04Z

1

Look for the .tft elements that are descendants of the current element:

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

$(".tft") alone matches all elements with a class of tft.

I would write the whole thing like this:

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

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

.map(...).get() is just a shorter way of writing the code that makes an array of all the tags.

answered Jun 16, 2013 at 23:19

Blender

300k55 gold badges462 silver badges511 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1689634 Over a year ago

This functions perfectly, thank you. I have one more small question regarding the tags. Some of them have namespaces attached to them (eg: "namespaceX:tag1" "namespaceY:tag2") How can I strip those from the output?

Blender Over a year ago

@user1689634: Just do this.title.split(':').slice(-1)

OptimusCrime · Accepted Answer · 2013-06-16 23:20:22Z

1

The problem is that .tft is not limited to the current .id44 you are looping over. Using "selector", this will limit the result to the this-container. In addition, I've added how to add the tags in the right .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(','));
});

answered Jun 16, 2013 at 23:20

OptimusCrime

14.9k13 gold badges63 silver badges98 bronze badges

1 Comment

user1689634 Over a year ago

I didn't know "selector", this was possible, thank you. That helps a lot.

Collectives™ on Stack Overflow

Create array from attributes; add them to the page

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related