在每个函数中使用 jQuery 索引

Question

我实际上有两个问题，

首先，我想计算 html 页面中的百分比并通过附加它用 javascript 返回它。这工作正常，但它在各处设置相同的值。我想我需要类似“这个”的东西，但我找不到如何让它发挥作用。 each 函数并不停留在 is li 内，而是在任何地方设置 it。

另一个问题是 var getalfavconvert = parseFloat(getalfav.substring(1)); 出于某种原因它返回一个奇怪的值。另一方面， var getalconvert = parseFloat(getal.substring(1)); 工作正常。我认为这与链接有关。

另一个问题是

$(".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);        
});

html中li的结构：

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

Answer 1

您遇到的“到处改变一切”问题是很常见的，因为您选择了某个类的所有对象。您想要做的是在使用 .each() 时通过使用 $(this) 找到每个对象的子级，使用 .children() 选择器。

我已经编辑了您的 jQuery 以反映这些更改：

$(".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); 
});

编辑

如果您查看上面的代码，您会看到

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

这里的关键是 .find("a") - 实际的 标签不是以下的孩子

，但是 .children() 不喜欢这个子子项，因此使用 .find()。另一种方法是这样的：

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

这仍然给出了正确的值，因为 .text( ) 删除内容中的所有 HTML，只留下一个数字。我推荐 .find() 方法，因为它更容易阅读并且语义正确，而且任何其他添加的内容都会把事情搞砸。

看一下 这个 JSFiddle 的示例:-)