使用 JavaScript,如何使用 getElementByClassName 获取另一个元素内具有特定类名的元素?
Using JavaScript, how do you get elements with a specific className that's inside another element by using getElementByClassName?
嗨,Whosebug 专家,我有这个 problem/question,请帮帮我。
我有这个代码; HTML 是软件生成的,所以我知道它不是很有效,我们不必担心。我想把jQuery的部分完全写在JavaScript里,我不想用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 也不被支持。
那我该怎么办?
- 将 2 类 收集到 NodeLists
- 将 2 个节点列表转换为数组。
- 迭代了 2 个 for 循环(一个嵌套在另一个循环中)
- 在第一个循环中,提取了 percent 中的文本(不需要正则表达式)
- 确保它是一个带有
parseInt
的数字
- 将该数字存储在数组中
stats[]
- 在第二个循环中,使用
stats[j]
对应的索引作为对应柱的新宽度。
- 添加了更多的小节,因为它很有趣。 :P
片段
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>
嗨,Whosebug 专家,我有这个 problem/question,请帮帮我。
我有这个代码; HTML 是软件生成的,所以我知道它不是很有效,我们不必担心。我想把jQuery的部分完全写在JavaScript里,我不想用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 也不被支持。
那我该怎么办?
- 将 2 类 收集到 NodeLists
- 将 2 个节点列表转换为数组。
- 迭代了 2 个 for 循环(一个嵌套在另一个循环中)
- 在第一个循环中,提取了 percent 中的文本(不需要正则表达式)
- 确保它是一个带有
parseInt
的数字
- 将该数字存储在数组中
stats[]
- 在第二个循环中,使用
stats[j]
对应的索引作为对应柱的新宽度。 - 添加了更多的小节,因为它很有趣。 :P
片段
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>