Question

我很难根据一组可变数量的a元素来获取百分比值。

<a href="index.php">Home</a>
<a href="#">Friends</a>
<a href="#">Profile</a>
<a href="#">Settings</a>
<a href="#">Logout</a>
...

每当我完成一个页面的构建，我会继续填写其他元素。 href属性，用于创建开发进度百分比。

js文件如下所示：

<script>
var percent = 0;
jQuery.fn.firstElement = function(fn){
    var i = this.length;

    fn.call(this[i], i, this[i]);
}

$('a').each(function(i, obj){
    if ($(obj).attr('href').length > 1){
        $(this).addClass('completed_link');
    }
});

$('a.completed_link').firstElement(function(i){

    /* below part doesn't output what I want to
    so, when I continue to fill attributes, percentage decreases */


    // var full_percentage = 100;
    // percent = parseInt(full_percentage / i);
    // $('.tsk-fill').css('width', percent + '%');


    /* this part shows real percentage for the first 10 elements
    it remains at 100%, on more than 10 */


    for (j=1; j <= i; j++) {
        percent = j*10; 
        $('.tsk-fill').css('width', percent + '%');
    }
}); 
</script>

有没有办法防止百分比下降并改为增加呢？

Answer 1

您正在以错误的方式计算百分比，请尝试这样做：

var all_links = $('a').length;
percent = parseInt((full_percentage * i) / all_links) // I think you got 10 elements max right?

Answer 2

您可以获得href不等于的所有链接＆＃39;＃＆＃39;然后是所有的链接。使用此选项将所有已完成的（不等于＆＃39;＃＆＃39;）除以所有链接的数量，然后乘以100以获得完成的百分比。这是一个代码示例：

<a href="google.com">Google</a></br>
<a href="help.com">Help</a></br>
<a href="#">Test2</a></br>
<a href="#">Test3</a></br>
<a href="#">Test4</a></br>

% Complete: <span id="done"></span>

<script>
var done = $('a:not([href="#"])').length;
var all  = $('a').length;

$('#done').append( (done / all) * 100 );

</script>

Answer 3

我已经为你完成了代码的重写，因为你已经让事情变得太复杂了。我也为你创造了一个有效的例子。

Here is my Codepen

另外，请注意：

在数学中，百分比是以100的分数表示的数字或比率。

Percentage on Wikipedia

将除数硬编码为10会导致错误。

$menuLinks = $('div.menu > a');
totalPages = $menuLinks.length;
completedPages = totalPages - $menuLinks.filter('[href="#"]').length;
percentage = completedPages / totalPages * 100;

console.log('totalPages', totalPages);
console.log('completedPages', completedPages);
console.log('Completed Percent', percentage);

$('.tsk-fill').css('width', percentage + '%');

.bar {
  width: 500px;
  height: 20px;
  background-color: grey;
}
.tsk-fill {
  height: 20px;
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bar">
  <div class="tsk-fill"></div>
</div>

<div class="menu">
  <a href="index.php">Home</a>
  <a href="#">Friends</a>
  <a href="#">Profile</a>
  <a href="#">Settings</a>
  <a href="#">Profile</a>
</div>

如何根据＆＃34; a＆＃34;来计算百分比带有href属性的标签

3 个答案: