javascript - Data attr value showing from console but not by using script -

html

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

i trying set width of each .meter based on number of votes has:

jquery

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

none of console.log work. , value of total_votes stays 0 after part.

even console.log($('#result').find('>div').eq(0).data('votes')); doesn't work , prints out null

but if use same code in console, works fine.

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

well, while there few other problems code, issue seems timing issue since it's working in console.

make sure code executes when document ready:

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

finally, stated in comments, use .children("div") instead of .find(">div"). target children have attribute using .children('[data-votes]')