Working with jQuery index in a each function

Question

I have actually 2 questions,

First, I want to calculate a percentage in a html page and return it with javascript by appending it. This works fine but it sets everywhere the same value. I think I need something like 'this' but I can't find how to get it to work. The each function doesn't stay within is li, but sets its everywhere.

Another problem is the var getalfavconvert = parseFloat(getalfav.substring(1)); for some reason it returns a strange value. The var getalconvert = parseFloat(getal.substring(1)); on the other hand works fine. I think it has something to do with the a link.

Another problem is

$(".thing-shot ul").prepend('<li class="hammer">10%</li>');

$('.things li .group').each(function(index) {

    // get value from page
    var getal = $('.current-user-view').text();
    var getalfav = $('.fav.marked a').text();

    // convert value to float
    var getalconvert = parseFloat(getal.substring(1));   
    var getalfavconvert = parseFloat(getalfav.substring(1));   

    //make a percentage calculation
    var gedeeld = getalconvert/getalfavconvert;
    var percentage = gedeeld*100;

    // Set percentage in html
    $(".hammer").text(percentage);        
});

Here is the structure of li in the html:

<li id="screenshot-2081" class="group">
    <div class="athing">
        <div class="thing-shot">
            <div class="thing-img">
                <a href="go.html" class="link"><img alt="teaser" src="teaser.png?1310142565" /></a>
            </div>

            <ul class="tools group">
                <li class="fav marked">
                    <a href="go.html">21</a>
                </li>
                <li class="cmnt current-user-cmnt
                    ">
                    <a href="#">6</a>
                </li>
                <li class="views current-user-view">
                    276
                </li>
            </ul>
        </div>
        <div class="extras">

        </div>
    </div>
</li>

You have some elements with the class of hammer? What are they (or it)? — Steve Wellens
– Steve Wellens, Commented Jul 10, 2011 at 10:58
Sorry forget it, I've added it to the javascript. This line: $(".shot ul").prepend('<li class="hammer">0%</li>'); — Max
– Max, Commented Jul 10, 2011 at 11:04
@Max: And how is .shot ul related to .things li .group ? — Felix Kling
– Felix Kling, Commented Jul 10, 2011 at 11:04
Changed the code, to make it clear, it prepended in the .thing-shot ul. Sorry! — Max
– Max, Commented Jul 10, 2011 at 11:11

Bojangles · Accepted Answer · 2011-07-10 11:37:40Z

1

The 'changing everything everywhere' problem you have is quite a common one, as you're selecting all objects of a certain class. What you want to do is find the children of each object when using .each() by using $(this), using the .children() selector.

I've edited your jQuery to reflect these changes:

$(".shot ul").prepend('<li class="hammer">0%</li>');

$('.things li .group').each(function(index) 
{
    // get value from page
    var getal = $(this).children('.current-user-view').text();
    var getalfav = $(this).children('.fav.marked').find("a").text();

    // convert value to float
    var getalconvert = parseFloat(getal.substring(1));
    var getalfavconvert = parseFloat(getalfav.substring(1));

    //make a percentage calculation
    var gedeeld = getalconvert/getalfavconvert;
    var percentage = gedeeld*100;

    // Set percentage in html
    $(this).children(".hammer").text(percentage); 
});

EDIT

If you look at the code above, you'll see

var getalfav = $(this).children('.fav.marked').find("a").text();

The key here is .find("a") - the actual <a> tag isn't a child of the <ul>, but a sub-child which .children() doesn't like, hence the .find(). Another way to do it is this:

var getalfav = $(this).children('.fav.marked').text();

This still gives the correct value because .text() strips all HTML from the contents and just leaves you with a number. I'd recommend the .find() method though as it's easier to read and semantically correct, as well as the fact that any other added content would mess things up.

Take a look at this JSFiddle for an example :-)

edited Jul 10, 2011 at 11:37

answered Jul 10, 2011 at 11:20

Bojangles

102k50 gold badges175 silver badges209 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Max Over a year ago

Great! Job! Thanx, now still a little problem : this returns nothing: var getalfav = $(this).children('.fav.marked a').text();

Collectives™ on Stack Overflow

Working with jQuery index in a each function

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related