使用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循环迭代（一个嵌套在另一个循环中）
4. 在第一个循环中，提取了百分比中的文本（不需要正则表达式）
5. 确保它是parseInt
的数字
6. 在数组stats[]
中存储该数字
7. 在第二个循环中，使用相应的stats[j]索引作为相应条形的新宽度。
8. 添加了几个吧，因为它很有趣。 ：P

段

＆＃13;
＆＃13;
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 + "%";
    
  }
}
＆＃13;
.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;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;