javascript - jQuery each function not working properly - Stack Overflow

admin管理员组

文章数量:1357405

I am generating circular counters for polls where I draw counter for each answer.

I am using this "plugin": /

Problem:

It is not getting text value from <div> and not drawing Counter for each div.

Note: For one div is working good

Example:

/

HTML:

<div class="pollAnswerBar">15</div>
<div class="pollAnswerBar">50</div>
<div class="pollAnswerBar">75</div>

JS:

jQuery(document).ready(function() {

    function drawCounter(percent) {
        jQuery('div.pollAnswerBar').html('<div class="percent"></div><div id="slice"' + (percent > 50 ? ' class="gt50"' : '') + '><div class="pie"></div>' + (percent > 50 ? '<div class="pie fill"></div>' : '') + '</div>');
        var deg = 360 / 100 * percent;
        jQuery('#slice .pie').css({
            '-moz-transform': 'rotate(' + deg + 'deg)',
            '-webkit-transform': 'rotate(' + deg + 'deg)',
            '-o-transform': 'rotate(' + deg + 'deg)',
            'transform': 'rotate(' + deg + 'deg)'
        });
        jQuery('.percent').html(Math.round(percent) + '%');
    }

    jQuery('.pollAnswerBar').each(function() {
        var percent = jQuery(this).text();
        console.log(percent);
        drawCounter(percent);
    });

});

I am generating circular counters for polls where I draw counter for each answer.

I am using this "plugin": http://blakek.us/labs/jquery/css3-pie-graph-timer/

Problem:

It is not getting text value from <div> and not drawing Counter for each div.

Note: For one div is working good

Example:

http://jsbin./AHUkoBA/3/edit

http://jsfiddle/mgcq9/

HTML:

<div class="pollAnswerBar">15</div>
<div class="pollAnswerBar">50</div>
<div class="pollAnswerBar">75</div>

JS:

jQuery(document).ready(function() {

    function drawCounter(percent) {
        jQuery('div.pollAnswerBar').html('<div class="percent"></div><div id="slice"' + (percent > 50 ? ' class="gt50"' : '') + '><div class="pie"></div>' + (percent > 50 ? '<div class="pie fill"></div>' : '') + '</div>');
        var deg = 360 / 100 * percent;
        jQuery('#slice .pie').css({
            '-moz-transform': 'rotate(' + deg + 'deg)',
            '-webkit-transform': 'rotate(' + deg + 'deg)',
            '-o-transform': 'rotate(' + deg + 'deg)',
            'transform': 'rotate(' + deg + 'deg)'
        });
        jQuery('.percent').html(Math.round(percent) + '%');
    }

    jQuery('.pollAnswerBar').each(function() {
        var percent = jQuery(this).text();
        console.log(percent);
        drawCounter(percent);
    });

});

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Oct 28, 2013 at 9:10 Ing. Michal HudakIng. Michal Hudak 5,6321212 gold badges6262 silver badges9595 bronze badges 0

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Here is working fiddle: http://jsfiddle/fKPb6/

You were modifying all elements rather than specifying each one individually.

Here is working code.

JS:

jQuery(document).ready(function () {

    function drawCounter(percent, element) {
        jQuery(element).html('<div class="percent"></div><div id="slice"' + (percent > 50 ? ' class="gt50"' : '') + '><div class="pie"></div>' + (percent > 50 ? '<div class="pie fill"></div>' : '') + '</div>');
        var deg = 360 * (percent / 100);
        jQuery('#slice .pie', element).css({
            '-moz-transform': 'rotate(' + deg + 'deg)',
                '-webkit-transform': 'rotate(' + deg + 'deg)',
                '-o-transform': 'rotate(' + deg + 'deg)',
                'transform': 'rotate(' + deg + 'deg)'
        });
        jQuery('.percent', element).html(Math.round(percent) + '%');
    }

    jQuery('.pollAnswerBar').each(function (index, element) {
        var percent = jQuery(element).text();
        console.log(percent);
        drawCounter(percent, element);
    });

});

By limiting the selection to the scope of the individual element e.g. jQuery('.percent', element) you are targeting the correct element rather than all .percent elements.

You can pass the event handler like this:

// Pass the event handler here
jQuery('.pollAnswerBar').each(drawCounter);

and call the function like:

// Declare the event handler with params passed from .each()
function drawCounter(i, elm) {
    var percent = $(elm).text();
    jQuery(elm).html('<div class="percent"></div><div id="slice"' + (percent > 50 ? ' class="gt50"' : '') + '><div class="pie"></div>' + (percent > 50 ? '<div class="pie fill"></div>' : '') + '</div>');
    var deg = 360 * (percent / 100);
    jQuery('#slice .pie', elm).css({
        '-moz-transform': 'rotate(' + deg + 'deg)',
            '-webkit-transform': 'rotate(' + deg + 'deg)',
            '-o-transform': 'rotate(' + deg + 'deg)',
            'transform': 'rotate(' + deg + 'deg)'
    });
    jQuery('.percent', elm).html(Math.round(percent) + '%');
}

Demo: Fiddle

---

Or only using the this keyword without any parameters being passed like:

// Pass the event handler here
jQuery('.pollAnswerBar').each(drawCounter);

// Declare the event handler using `this`
function drawCounter() {
    var percent = $(this).text();
    jQuery(this).html('<div class="percent"></div><div id="slice"' + (percent > 50 ? ' class="gt50"' : '') + '><div class="pie"></div>' + (percent > 50 ? '<div class="pie fill"></div>' : '') + '</div>');
    var deg = 360 * (percent / 100);
    jQuery('#slice .pie', this).css({
        '-moz-transform': 'rotate(' + deg + 'deg)',
            '-webkit-transform': 'rotate(' + deg + 'deg)',
            '-o-transform': 'rotate(' + deg + 'deg)',
            'transform': 'rotate(' + deg + 'deg)'
    });
    jQuery('.percent', this).html(Math.round(percent) + '%');
}

Demo: Fiddle

You don't need to specify each() function here Try this:

function myfun(){
        var percent = jQuery(this).text();
        console.log(percent);
        drawCounter(percent);
    });
jQuery('.pollAnswerBar').myfun();

本文标签： javascriptjQuery each function not working properlyStack Overflow