使用JavaScript，如何使用getElementByClassName獲取具有位於另一個元素內的特定className的元素？

Question

您好stackoverflow專家，我有這個問題/疑問，請在這里幫助我。

我有這個代碼; HTML是軟件生成的，所以它不是很有效我知道，我們不必擔心。 我想在JavaScript中完全編寫jQuery部分，我不想使用jQuery，只是簡單的JavaScript。 我該怎么做？

 $(".skillbar-container").each(function() { var x = $(this).find(".skillbar-percent").html(); x = x.replace(/\\s+/g, ''); $(this).find(".skillbar-bar").width(x + "%"); }); 

 .skillbar-container { margin-bottom: 24px; } .skillbar-texts { margin-bottom: 6px; font-size: 15px; } .skillbar-title { display: inline-block; float: left; text-transform: capitalize; } .percent-mark { display: inline; float: right; } .skillbar-percent { display: inline-block; float: right; } .skillbar { height: 3px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; background-color: red; overflow: hidden; } .skillbar-bar { width: 63%; height: 100%; background-color: blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="skillbars"> <div class="skillbar-container team-skillbar"> <div class="skillbar-texts"> <div class="skillbar-title"> Sales Management </div> <div class="percent-mark"> % </div> <div class="skillbar-percent wf-affected"> 76 </div> </div> <div class="skillbar"> <div class="skillbar-bar"> </div> </div> </div> <div class="skillbar-container team-skillbar"> <div class="skillbar-texts"> <div class="skillbar-title"> Sales Management </div> <div class="percent-mark"> % </div> <div class="skillbar-percent wf-affected"> 15 </div> </div> <div class="skillbar"> <div class="skillbar-bar"> </div> </div> </div> </div> 

這是我的嘗試：

function myFunction() {
  var x = document.getElementsByClassName("skillbar-container");
  var i;
  for (i = 0; i < x.length; i++) {
    var y = x[i].getElementsByClassName("skillbar-percent").innerHTML;
    var z = x[i].getElementsByClassName("skillbar-bar");
    z.style.width = y + '%';
  }
}
myFunction();

但它不起作用，顯然是這樣的： document.getElementsByClassName("skillbar-container")getElementsByClassName("skillbar-bar"); 不起作用，querySelector也不支持。

所以我該怎么做？

我非常感謝你的幫助

Answer 1

1. 將2個類收集到NodeLists中
2. 將2個NodeLists轉換為數組。
3. 迭代2 for for循環（一個嵌套在另一個循環中）
4. 在第一個循環中，提取了百分比的文本（不需要正則表達式）
5. 確保它是一個帶有parseInt的數字
6. 在數組stats[]存儲該數字
7. 在第二個循環中，使用stats[j]的相應索引作為相應條形的新寬度。
8. 添加了幾個吧，因為它很有趣。 ：P

SNIPPET

 var skBar = document.getElementsByClassName('skillbar-bar'); var skPer = document.getElementsByClassName('skillbar-percent'); var barArr = Array.prototype.slice.call(skBar); var perArr = Array.prototype.slice.call(skPer); var i; var j; var stats = []; for (i = 0; i < perArr.length; i++) { var x = perArr[i].textContent; x = parseInt(x, 10); stats.push(x); console.log('percent: '+x); for (j = 0; j < barArr.length; j++) { var y = stats[j]; barArr[j].style.width = y + "%"; } } 

 .skillbar-container { margin-bottom: 24px; } .skillbar-texts { margin-bottom: 6px; font-size: 15px; } .skillbar-title { display: inline-block; float: left; text-transform: capitalize; } .percent-mark { display: inline; float: right; } .skillbar-percent { display: inline-block; float: right; } .skillbar { height: 3px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; background-color: red; overflow: hidden; } .skillbar-bar { height: 100%; background-color: blue; } 

 <div class="skillbars"> <div class="skillbar-container team-skillbar"> <div class="skillbar-texts"> <div class="skillbar-title"> Sales Management </div> <div class="percent-mark"> % </div> <div class="skillbar-percent wf-affected"> 76 </div> </div> <div class="skillbar"> <div class="skillbar-bar"> </div> </div> </div> <div class="skillbar-container team-skillbar"> <div class="skillbar-texts"> <div class="skillbar-title"> Sales Management </div> <div class="percent-mark"> % </div> <div class="skillbar-percent wf-affected"> 15 </div> </div> <div class="skillbar"> <div class="skillbar-bar"> </div> </div> </div> <div class="skillbar-container team-skillbar"> <div class="skillbar-texts"> <div class="skillbar-title"> Sales Management </div> <div class="percent-mark"> % </div> <div class="skillbar-percent wf-affected"> 92 </div> </div> <div class="skillbar"> <div class="skillbar-bar"> </div> </div> </div> <div class="skillbar-container team-skillbar"> <div class="skillbar-texts"> <div class="skillbar-title"> Sales Management </div> <div class="percent-mark"> % </div> <div class="skillbar-percent wf-affected"> 41 </div> </div> <div class="skillbar"> <div class="skillbar-bar"> </div> </div> </div> <div class="skillbar-container team-skillbar"> <div class="skillbar-texts"> <div class="skillbar-title"> Sales Management </div> <div class="percent-mark"> % </div> <div class="skillbar-percent wf-affected"> 50 </div> </div> <div class="skillbar"> <div class="skillbar-bar"> </div> </div> </div> </div>