Create an array from HTML in a specific form with jQuery

Question

I'm having problems with the following piece. I'm trying to create some gallery of my own, but I'm in the very early beginning of learning jQuery, and all this array stuff is pretty hard for me to understand..

In my CMS I have created a looped output in the following form for all elements:

<img class="content" src="path/to/image1.jpg" />
<p class="title">Description1</p>
<a class="link_img" href="http://www.somesite1.com" target="_blank">Link to Site1</a>

<img class="content" src="path/to/image2.jpg" />
<p class="title">Description2</p>
<a class="link_img" href="http://www.somesite2.com" target="_blank">Link to Site2</a>

But I need to bring it into this form (for my jQuery playground):

var myDemoImages = [
    { src: 'path/to/image1.jpg', title: 'Description1', subtitle: 'http://www.somesite1.com' },
    { src: 'path/to/image2.jpg', title: 'Description2', subtitle: 'http://www.somesite2.com' }
];

I tried something like the following, but it's mixing up values, doubling values.

$('img.content').each(function() {
    for (var k = 0; k < this.attributes.length; k++)
    {
        var attr = this.attributes[k];
        if (attr.name != 'class')
            myImages.push("src:'"+attr.value+"'");
    }
});

Also the "value" I need from the p tag is actually not a value, but shouldn't something like this work?

myImages.push(this.innerHTML);

you have a variable named " myDemoImages" but no "myImages" variable (you used for pushin the src. are they identical? — seoul
– seoul, Commented May 20, 2011 at 12:16

kapa · Accepted Answer · 2011-05-20 12:15:01Z

2

I would do something like:

<div class="demoImage">
<img class="content" src="path/to/image1.jpg" /> 
<p class="title">Description1</p>
<a class="link_img" href="http://www.somesite1.com" target="_blank">Link to Site1</a>
</div>

Note that I added a div around your elements to make it easier to access them.

And the jQuery:

var fos=$('.demoImage').map(function () {
    var $this=$(this);
    return {
        src: $this.find('img.content').attr('src'),
        title: $this.find('p.title').html(),
        subtitle: $this.find('a.link_img').attr('href'),
    };
}).get();

jsFiddle Demo

The solution uses the .map() function which is a great tool to create any arrays out of your jQuery collections.

answered May 20, 2011 at 12:15

kapa

78.9k21 gold badges166 silver badges178 bronze badges

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

6 Comments

Gary Green Over a year ago

Very nice elegant way of doing this. Do you not find it irritating that jQuery does so many things with .get -- it can retrieve X element from the matched set, get the last mapped array (which I didn't even know about since your example), or be an ajax get request. I think it's so fragmented!

kapa Over a year ago

@Gary Green On the contrary, I like it. get has a lot of meanings also in the English language, the meaning depends on the context in most cases. Javascript is a programming language in the end, so I find this intuitive. I'd hate to write getLastMappedArray or getElement, etc.

Gary Green Over a year ago

Obviously it's shorter to write, but getElement etc is more descriptive and intuitive to me. It's also a nuisance finding the correct page for .get from the API in the context you want to use it.

kapa Over a year ago

@Gary Green Then it's down to personal preference it seems :).

Gary Green Over a year ago

True, try typing "get" into the search and you'll come up with a page for disamguation. Also you'll see no mention of .get for use in .map -- it only appears on the .map page. Makes you wonder where else .get can be ambiguously used.

|

Peter Mortensen · Accepted Answer · 2011-05-20 16:14:00Z

0

To get the HTML content from the p tag, use the $("p").html() method.
To get inner text, use the .text() method :-)

edited May 20, 2011 at 16:14

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered May 20, 2011 at 12:18

seoul

8661 gold badge12 silver badges32 bronze badges

Collectives™ on Stack Overflow

Create an array from HTML in a specific form with jQuery

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related