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 🙂

Answer 1

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.