1. 首頁
  2. 問答
  3. 循環遍歷JavaScript JavaScript

循環遍歷JavaScript JavaScript

2017-03-09 202 views
2

我已經設法編寫了一些JavaScript代碼來遍歷三列並顯示特定的HTML元素。它循環遍歷第一列然後停止。我似乎無法得到它來改變計數器變量來改變列。請在下面找到我使用的代碼。循環遍歷JavaScript JavaScript

window.onload = function load() { 
 
    var counter = 1; 
 
    var id = "col" + counter; 
 
    var skills = document.getElementById(id).getElementsByTagName("p"); 
 
    var progress = document.getElementsByTagName("span"); 
 
    for (i = 0; i < progress.length; i++) { 
 
    console.log(counter); 
 
    console.log(skills.length); 
 
    if (i < skills.length) { 
 
     counter++; 
 
    } 
 
    console.log(i); 
 
    alert("Skill: " + skills[i].innerHTML + "; " + "Progress: " + progress[i].innerHTML) 
 
    } 
 

 
    document.getElementById("skills").innerHTML = skills[0].innerHTML; 
 
    document.getElementById("progress").innerHTML = progress[0].innerHTML; 
 
}
.resume { 
 
    width: 816px; 
 
    margin: 48px 48px 48px 48px; 
 
    font-size: 13px; 
 
    line-height: 16px; 
 
} 
 

 
.header { 
 
    text-align: center; 
 
    line-height: 4px; 
 
} 
 

 
.header hr { 
 
    margin: 5px; 
 
} 
 

 
.name { 
 
    text-transform: uppercase; 
 
    font-size: 32px; 
 
} 
 

 
.contact p { 
 
    margin: 10px; 
 
} 
 

 
.summary h2, 
 
.skills h2, 
 
.professionalhistory h2, 
 
.education h2 { 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
    font-size: 24px; 
 
    margin-top: 15px; 
 
    margin-bottom: 15px; 
 
} 
 

 
.skills { 
 
    line-height: 13px; 
 
} 
 

 
.skills p { 
 
    margin: 8px 8px 8px 8px; 
 
} 
 

 
.progress { 
 
    background-color: #BCBEBF; 
 
    text-align: left; 
 
    position: relative; 
 
    height: 13px; 
 
    margin: 8px 8px 8px 8px; 
 
} 
 

 
.progress-bar { 
 
    background-color: #323232; 
 
    text-align: left; 
 
    line-height: 13px; 
 
    padding: 1px 10px 2px; 
 
} 
 

 
.progress-bar span { 
 
    padding: 1px 10px 2px; 
 
    position: absolute; 
 
    z-index: 2; 
 
    color: white; 
 
    top: 50%; 
 
    left: 0%; 
 
    transform: translate(0%, -50%); 
 
} 
 

 
.employer { 
 
    font-size: 16px; 
 
    font-weight: bold; 
 
} 
 

 
.position { 
 
    text-decoration: underline; 
 
} 
 

 
.description { 
 
    width: 95%; 
 
    margin-left: 12px; 
 
} 
 

 
.results { 
 
    font-weight: bold; 
 
} 
 

 
.titles { 
 
    text-decoration: underline; 
 
}
<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <title>Home | Resume</title> 
 
    <meta charset="UTF-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <script src="js/jsTest.js"></script> 
 
    <script src="https://use.fontawesome.com/55fed2cea8.js"></script> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
 
    <link href="css/style.css" rel="stylesheet"> 
 
</head> 
 

 
<body> 
 
    <div class="container"> 
 
    <div class="resume"> 
 
     <div class="row"> 
 
     <div class="col-lg-12"> 
 
      <div class="header"> 
 
      <h1 class="name">Troy Andrew Pilewski</h1> 
 
      <hr /> 
 
      <div class="contact"> 
 
      </div> 
 
      <hr /> 
 
      <hr /> 
 
      </div> 
 
      <div class="skills"> 
 
      <h2>Possesses Advance Knowledge Of</h2> 
 
      <div class="row"> 
 
       <div id="col1" class="col-lg-4"> 
 
       <p>Microsoft Operating Systems</p> 
 
       <div class="progress"> 
 
        <div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13" aria-valuemin="0" aria-valuemax="13" style="width:100%"> 
 
        <span>13 Years</span> 
 
        </div> 
 
       </div> 
 
       <p>Microsoft Office SharePoint Services</p> 
 
       <div class="progress"> 
 
        <div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13" aria-valuemin="0" aria-valuemax="13" style="width:53.85%"> 
 
        <span>7 Years</span> 
 
        </div> 
 
       </div> 
 
       <p>Microsoft Active Directory</p> 
 
       <div class="progress"> 
 
        <div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13" aria-valuemin="0" aria-valuemax="13" style="width:100%"> 
 
        <span>13 Years</span> 
 
        </div> 
 
       </div> 
 
       <p>Microsoft Exchange Services</p> 
 
       <div class="progress"> 
 
        <div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13" aria-valuemin="0" aria-valuemax="13" style="width:100%"> 
 
        <span>13 Years</span> 
 
        </div> 
 
       </div> 
 
       <p>Microsoft Office Suite</p> 
 
       <div class="progress"> 
 
        <div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13" aria-valuemin="0" aria-valuemax="13" style="width:100%"> 
 
        <span>13 Years</span> 
 
        </div> 
 
       </div> 
 
       <p>Cisco Networking Devices</p> 
 
       <div class="progress"> 
 
        <div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13" aria-valuemin="0" aria-valuemax="13" style="width:100%"> 
 
        <span>13 Years</span> 
 
        </div> 
 
       </div> 
 
       <p>VMWare Products</p> 
 
       <div class="progress"> 
 
        <div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13" aria-valuemin="0" aria-valuemax="13" style="width:69.23%"> 
 
        <span>9 Years</span> 
 
        </div> 
 
       </div> 
 
       </div> 
 
       <div id="col2" class="col-lg-4"> 
 
       <p>Project Management</p> 
 
       <div class="progress"> 
 
        <div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13" aria-valuemin="0" aria-valuemax="13" style="width:38.46%"> 
 
        <span>5 Years</span> 
 
        </div> 
 
       </div> 
 
       <p>Personnel Management</p> 
 
       <div class="progress"> 
 
        <div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13" aria-valuemin="0" aria-valuemax="13" style="width:69.23%"> 
 
        <span>9 Years</span> 
 
        </div> 
 
       </div> 
 
       <p>Training and Development</p> 
 
       <div class="progress"> 
 
        <div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13" aria-valuemin="0" aria-valuemax="13" style="width:69.23%"> 
 
        <span>9 Years</span> 
 
        </div> 
 
       </div> 
 
       <p>Customer Service Relations</p> 
 
       <div class="progress"> 
 
        <div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13" aria-valuemin="0" aria-valuemax="13" style="width:61.54%"> 
 
        <span>8 Years</span> 
 
        </div> 
 
       </div> 
 
       <p>Performance Management</p> 
 
       <div class="progress"> 
 
        <div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13" aria-valuemin="0" aria-valuemax="13" style="width:69.23%"> 
 
        <span>9 Years</span> 
 
        </div> 
 
       </div> 
 
       <p>Oral Expressive</p> 
 
       <div class="progress"> 
 
        <div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13" aria-valuemin="0" aria-valuemax="13" style="width:100.00%"> 
 
        <span>13 Years</span> 
 
        </div> 
 
       </div> 
 
       <p>Critical Thinker</p> 
 
       <div class="progress"> 
 
        <div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13" aria-valuemin="0" aria-valuemax="13" style="width:100.00%"> 
 
        <span>13 Years</span> 
 
        </div> 
 
       </div> 
 
       </div> 
 
       <div id="col3" class="col-lg-4"> 
 
       <p>Complex Problem Solver</p> 
 
       <div class="progress"> 
 
        <div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13" aria-valuemin="0" aria-valuemax="13" style="width:100.00%"> 
 
        <span>13 Years</span> 
 
        </div> 
 
       </div> 
 
       <p>Attention to Detail</p> 
 
       <div class="progress"> 
 
        <div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13" aria-valuemin="0" aria-valuemax="13" style="width:100.00%"> 
 
        <span>13 Years</span> 
 
        </div> 
 
       </div> 
 
       <p>Sandler Sales Concepts</p> 
 
       <div class="progress"> 
 
        <div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13" aria-valuemin="0" aria-valuemax="13" style="width:23.08%"> 
 
        <span>3 Years</span> 
 
        </div> 
 
       </div> 
 
       <p>Visual Basic for Applications</p> 
 
       <div class="progress"> 
 
        <div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13" aria-valuemin="0" aria-valuemax="13" style="width:69.23%"> 
 
        <span>9 Years</span> 
 
        </div> 
 
       </div> 
 
       <p>Java Application Development</p> 
 
       <div class="progress"> 
 
        <div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13" aria-valuemin="0" aria-valuemax="13" style="width:7.69%"> 
 
        <span>1 Years</span> 
 
        </div> 
 
       </div> 
 
       <p>Microsoft Visual Studio</p> 
 
       <div class="progress"> 
 
        <div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13" aria-valuemin="0" aria-valuemax="13" style="width:84.62%"> 
 
        <span>11 Years</span> 
 
        </div> 
 
       </div> 
 
       <p>Microsoft SharePoint Designer</p> 
 
       <div class="progress"> 
 
        <div class="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuenow="13" aria-valuemin="0" aria-valuemax="13" style="width:38.46%"> 
 
        <span>5 Years</span> 
 
        </div> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2017-03-09 TroyPilewski

+0

你有一個循環，這似乎是通過列循環......你有沒有其他的循環，所以不知道你是怎麼想它會做你期望 –

+0

什麼但是，你有代碼會進程**所有**跨度，不管他們在哪一列 - 可能不是你想要做的 –

+0

我想我錯過了寫if語句。它應該改變計數器，如果它到達列的末尾。 – TroyPilewski

回答

0

我希望看到你所聲稱的，你想要做一個嵌套循環...基本上，像這樣

window.onload = function load() { 
    for(col = 1; col <= 3; col++) { 
     var id = "col" + col; 
     var contain = document.getElementById(id); 
     // get skills inside the current "contain" (column) 
     var skills = contain.getElementsByTagName("p"); 
     // get progress inside the current "contain" (column) 
     var progress = contain.getElementsByTagName("span"); 
     for (i = 0; i < progress.length; i++) { 
      // do things for each span in a column here 
     } 
     // do things for each column 
    } 
}

來源

2017-03-09 23:36:34

+0

我會嘗試今晚的上述腳本。 – TroyPilewski

+0

謝謝！這對我來說最合適！ – TroyPilewski

+0

請找一個顯示我正在嘗試做什麼的小提琴。不知道爲什麼在小提琴中進度條不會增加到正確的位置。[jsFiddle]（https://jsfiddle.net/KhmerBoi1/c3xto4kh/1/） – TroyPilewski

0

嘗試下面嵌套我的變化for循環;所有我修改的是JavaScript。

window.onload = function load() { 
    var counter = 1; 

    var progress = document.getElementsByTagName("span"); 
    for (i = 0; i < progress.length; i++) { 
    var id = "col" + (i+1); 
    var skills = document.getElementById(id).getElementsByTagName("p"); 
    for(j = 0; j < skills.length; j++) 
     alert("Skill: " + skills[j].innerHTML + "; " + "Progress: " + progress[i].innerHTML) 
    }  
    document.getElementById("skills").innerHTML = skills[0].innerHTML; 
    document.getElementById("progress").innerHTML = progress[0].innerHTML; 
}

來源

2017-03-09 23:41:27 Adam

相關問題

 相關問題