Get attributes from the rel attribute with jQuery

Im using a plugin that requires the rel-element to look like this.

<ul id="product-thumbs-list">
      <li><a href="1-big.jpg" rel="useZoom: 'cdonZoom', smallImage: '1.jpg'"></li>
      <li><a href="2-big.jpg" rel="useZoom: 'cdonZoom', smallImage: '2.jpg'"></li>
</ul>

Is it possible to get the smallImage-value 开发者_运维技巧via jQuery?

In this case, '1.jpg, or '2.jpg'.

Thanks!

Here is one way:

$("#product-thumbs-list a").each(function(index) {
   var arrTemp = $(this).attr("rel").split("smallImage: ");
   var value = arrTemp[1];
   alert(value);
});

Live test case.

you can get the rel attributes that returns the string "useZoom: 'cdonZoom', smallImage: '1.jpg'". Than you can split the string using ":" and get the last array item.

I hope it's helpful

Superbly ugly, but you can use the dreaded eval(), provided that the rel data are "well-formed":

$(function() {
    $('a').mouseover(function() {
        eval('var rel = {' + $(this).attr('rel') + '};');
        $('#out').text(rel.smallImage);
    });
});

With HTML:

<ul id="product-thumbs-list">
    <li><a href="1-big.jpg" rel="useZoom: 'cdonZoom', smallImage: '1.jpg'">link1</a></li>
    <li><a href="2-big.jpg" rel="useZoom: 'cdonZoom', smallImage: '2.jpg'">link2</a></li>
</ul>
<p id="out"></p>

Demo.