jquery - Jquery data() 返回未定义

Question

我一直在做一个简单的 jquery data() 测试。但是它返回未定义。它可以在 jsfiddle 上运行（http://jsfiddle.net/yrCdj/）。

我有一个 jinja2 循环，它填充一个 div，我想用一些元数据标记它以供以后使用：

{% for s in siteInfo[:markers[0]] %}
<div class="sitebox2">
<script>
$(".sitebox2:last").append('<a href="/sites/d?siteid={{s[5]}}">{{s[0]}}</a><br>Distance                    from {{loc}} is {{s[6]}} km.<br>');
$(".sitebox2:last").data('fruit', 'apple');
</script>

</div>
{% endfor %}

然后我尝试调用这些数据来测试它是否有效：

<script type="text/javascript">
$(".sitebox2").each(function(k, v) {
    var f = $(v).data('fruit');
alert(f);
});

</script>

它返回未定义。关于出了什么问题的任何想法？它看起来像一个范围问题，所以也许我需要找到一种直接从 DOM 获取数据的方法。

Answer 1

尝试在关闭 div 标记之后执行脚本。

{% for s in siteInfo[:markers[0]] %}
<div class="sitebox2">
  <a href="/sites/d?siteid={{s[5]}}">{{s[0]}}</a><br>Distance from {{loc}} is {{s[6]}} km.<br>
</div>
<script>
  $(".sitebox2:last").data('fruit', 'apple');
</script>
{% endfor %}

或者您可以使用data如下属性：

{% for s in siteInfo[:markers[0]] %}
<div class="sitebox2" data-fruit="apple">
  <a href="/sites/d?siteid={{s[5]}}">{{s[0]}}</a><br>Distance from {{loc}} is {{s[6]}} km.<br>
</div>
{% endfor %}