Append anchor attributes to an array with jQuery

Question

Having real trouble with this one and I know it's simple. Google isn't helping too much because I'm not quite sure what to ask. So here's the deal:

I've got a list of anchors and need to append two attributes from each of them to an array in a specific format. I can easily grab the attributes for each element, but I'm not sure how to append them to the array. Here's what I'm looking for:

Goal Array Output

slides = [{
    img: 'img/aaron1.jpg',
    desc: '127'
}

HTML

<section id="photoBin">
    <ul>
        <li><a id="test" href="img/aaron1.jpg" title="Photo #127">127</a></li>
        <li><a href="img/aaron2.jpg" title="Photo #128">128</a></li>
        <li><a href="img/aaron3.jpg" title="Photo #129">129</a></li>
        <li><a href="img/aaron4.jpg" title="Photo #130">130</a></li>
        <li><a href="img/aaron5.jpg" title="Photo #131">131</a></li>
        <li><a href="img/aaron6.jpg" title="Photo #132">132</a></li>
    </ul>
</section>

JavaScript

var slides = [];

$('li a').each(function(){

    var el = $(this)
        img,
        desc;

        img = el.attr('href');
        desc = el.attr('title').split('Photo #');
});

Thanks for your help! Lets chalk this one up to easy reputation :)

jbabey · Accepted Answer · 2012-10-17 19:00:05Z

3

You're missing the part where you add them to the array via push.

Also, split gives you an array; if you're only looking for the second piece of the split (the number), you need to access the second element of that array via the index accessor [1]:

http://jsfiddle.net/H4wWX/1/

var slides = [];

$('li a').each(function(){
    var el = $(this);

    slides.push({
        img: el.attr('href'),
        desc: el.attr('title').split('Photo #')[1]
    });
});

You may also want to consider bullet-proofing this; if el.attr('title') is not a string or doesn't contain "Photo #", the split/index accessor will throw an exception.

edited Oct 17, 2012 at 19:00

answered Oct 17, 2012 at 18:54

jbabey

46.8k12 gold badges73 silver badges94 bronze badges

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

3 Comments

technopeasant Over a year ago

The title will theoretically always have the prefix, but i prefer reducing the chances of error. do you have a recommendation for always picking out the number string from the title? it will for sure always include a number, though the digit length might vary

technopeasant Over a year ago

also huge kudos for the reduced variables. i couldn't for the life of me remember the .push() method- so additional kudos for not ridiculing!

Jason M. Batchelor Over a year ago

The only possibly-cleaner way would be if he got his number from the el.text() rather than splitting on the title attribute, afaik, but that requires that his a-tag's text always be the number. On the other hand, the split method relies on his title never changing, either, so it's a bit fragile, either way.

AMember · Accepted Answer · 2012-10-17 18:52:40Z

0

var slides = [];

$('li a').each(function(){

    var el = $(this)
        img,
        desc;

        img = el.attr('href');
        desc = el.attr('title').split('Photo #');
slides.push({
     img: img ,
    desc: desc 
})
});

answered Oct 17, 2012 at 18:52

AMember

3,0772 gold badges35 silver badges65 bronze badges

6 Comments

AMember Over a year ago

do you only need the first one?

Jason M. Batchelor Over a year ago

"desc" will end up being an array with two values... desc[0] will be '', and desc[1] will be the number.

AMember Over a year ago

so just take the value that you need ?!?

AMember Over a year ago

and why not take the text value?

Jason M. Batchelor Over a year ago

I'm just saying that your method will end up having an array for the desc value, which is not what he's looking for. He needs to take, if he's using your example, desc[1] if he wants just the numeric part.

|

Jason M. Batchelor · Accepted Answer · 2012-10-17 18:52:51Z

0

Small modification should get you what you're looking for:

var slides = [];

$('li a').each(function(){

    var el = $(this)
        img,
        desc;

    var slide = { img : el.attr('href'),
                  desc: el.attr('title').split('Photo #')[1] };
    slides.push(slide); 
});

It should be noted that this is not necessarily foolproof. Look forward to odd js errors if the title attribute is ever wrong or empty. You might want to do some testing to make sure you're getting what you expect, before pushing the slide to the array.

answered Oct 17, 2012 at 18:52

Jason M. Batchelor

2,95119 silver badges25 bronze badges

Comments

Gromer · Accepted Answer · 2012-10-17 18:55:17Z

0

Fiddle: http://jsfiddle.net/gromer/zqn43/

var slides = [];

$('li a').each(function(){

    var el = $(this);
    var imgHref= el.attr('href');
    var description = el.attr('title').split('Photo #')[1];

    slides.push({
        img: imgHref,
        desc: description
    });
});

answered Oct 17, 2012 at 18:55

Gromer

9,9614 gold badges36 silver badges55 bronze badges

Comments

Reflective · Accepted Answer · 2012-10-17 18:56:49Z

0

you want to add the following line, right?

slides.push({img: img, desc: desc})

It's too simple for a question, so may be you need something different?

answered Oct 17, 2012 at 18:56

Reflective

3,9371 gold badge17 silver badges25 bronze badges

Collectives™ on Stack Overflow

Append anchor attributes to an array with jQuery

5 Answers 5

3 Comments

6 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

6 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related