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

私はあなたがあまりにも複雑なものを作ってきたように、あなたのためのコードを、完全に書き換えられました。私はあなたのための実例も作りました。

Here is my Codepen

また、注意してください：数学で

を、割合は数や比率が100あなたを持つ

Percentage on Wikipedia

の一部として表されます10にハードコードされた除数はエラーを引き起こしています。あなたは `href`、またはその他/全てに記入したい

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