使用 jQuery 从 rel 属性中获取属性答案

【问题标题】：Get attributes from the rel attribute with jQuery使用 jQuery 从 rel 属性中获取属性
【发布时间】：2011-03-29 09:11:28
【问题描述】：

我使用的插件需要 rel 元素看起来像这样。

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

是否可以通过 jQuery 获取 smallImage 值？
在这种情况下，“1.jpg”或“2.jpg”。

谢谢！

【问题讨论】：

我认为 jQuery 没有简单的方法。您可能只需要使用.attr('rel') 获取 rel 的内容并将其拆分为一个数组，然后找到以 smallImage 开头的结果并从中获取文件名。
在 rel 属性中存储这样的数据是一个非常糟糕的插件。应该使用 data-xxx="" 或至少将数据存储为 JSON。

标签： jquery html rel

【解决方案1】：

这是一种方法：

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

Live test case.

【讨论】：

这很好用，只要您在 smallImage 值之后不输入任何内容。好吧，至少我不会。谢谢
@Maartin 非常正确.. 要支持这种情况，您可以像这样添加另一个 split：var value = arrTemp[1].split(", ")[0]; 假设格式是一致的。本案例的 jsFiddle 示例：jsfiddle.net/yahavbr/4FGzY/1

【解决方案2】：

您可以获得返回字符串“useZoom: 'cdonZoom', smallImage: '1.jpg'”的 rel 属性。您可以使用“：”拆分字符串并获取最后一个数组项。

希望对你有帮助

【讨论】：

【解决方案3】：

非常丑陋，但您可以使用可怕的eval()，前提是rel 数据是“格式正确的”：

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

使用 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.

【讨论】：