如何根据带有 href 属性的"a"标签计算百分比

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 不等于"#"的所有链接，然后获取所有链接。 使用此选项将所有已完成的链接（不等于"#"）除以所有链接的数量，然后乘以 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

我已经为您完全重写了代码，因为您使事情变得太复杂了。我还为您创建了一个工作示例。

这是我的码写笔

另外，请注意：

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

维基百科上的百分比

将除数硬编码为 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>