Working with jQuery index in a each function

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>

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 :-)