在每个函数中使用jQuery索引

Working with jQuery index in a each function

本文关键字：jQuery 索引 函数      更新时间：2023-09-26

我有两个问题，

首先，我想计算html页面中的百分比，并通过附加它返回javascript。这工作得很好，但它设置了相同的值。我想我需要这样的东西，但我不知道如何让它工作。each函数不保留在它的li中，而是在各处设置它。

另一个问题是var getalfavconvert = parseFloat(getalfav.substring(1));由于某种原因返回了一个奇怪的值。另一方面，var getalconvert = parseFloat(getal.substring(1));工作良好。我想这和a链接有关。

另一个问题是

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

当您选择某类的所有对象时，您遇到的'到处更改所有内容'问题是相当常见的。你要做的是找到每个对象的子当使用$(this)使用.children()选择器使用.each()时。

我已经编辑了你的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") -实际的<a>标记不是<ul>的子标记，而是.children()不喜欢的子标记，因此是.find()。另一种方法是:

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

这仍然给出正确的值，因为.text()从内容中剥离所有HTML，只留给您一个数字。我推荐.find()方法，因为它更容易阅读和语义正确，以及任何其他添加的内容会把事情搞砸的事实。

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

相关文章：