Question

HTML

<div id="result">
    <!-- one of many choices -->
    <div data-votes="9">
        <div class="meter"></div>
        Choice name <span>9 Votes</span>
    </div>
</div>

我正在尝试根据它的投票数设置每个.meter的宽度：

的jQuery

$('#result').find('>div').each( function () {
    total_votes += $(this).data('votes');
    console.log(total_votes);
    console.log('testlog');
});

console.log都没有工作。 total_votes的值在此部分后保留0。

即使console.log($('#result').find('>div').eq(0).data('votes'));无效，也会打印出null

但是如果我在控制台中使用相同的代码，它可以正常工作。

> $('#result').find('>div').eq(1).data('votes')
15
> typeof $('#result').find('>div').eq(1).data('votes')
"number"

Answer 1

嗯，虽然代码还有其他一些问题，但问题似乎是时间问题，因为它在控制台中工作。

确保代码仅在文档准备就绪时执行：

$(function () {
    //your code goes here
});

最后，正如评论中所述，请使用.children("div")代替.find(">div")。您也可以仅使用.children('[data-votes]')

定位具有此属性的子项

Answer 2

在编写代码时，total_votes变量是.each()回调的本地变量，因此每次循环开始时它都会被重置，并在循环结束后立即被遗忘。

您需要在循环之前初始化total_votes：

var total_votes = 0;

$('#result').find('>div').each( function () {

http://jsfiddle.net/mblase75/k46aB/

从控制台显示的数据attr值，但不是使用脚本

2 个答案: