通过子DOM元素执行javascript操作 [英] Perform javascript operations through child DOM elements

问题描述

我正在寻找一种方法来遍历具有给定类（ .war ）的所有容器，并且能够执行两个子元素之间的比较并添加每个人都有不同的等级（赢家/输家）。

优化DOM，能够删除 .score a / .score b 并保留所有 .score 如果可能的话会很棒。

我尝试使用javascript和jquery迭代子元素，没有结果。

  var scoreA = document.getElementsByClassName（score a）[0]; var scoreB = document.getElementsByClassName（score b）[0]; if（scoreA> scoreB）{ scoreA.classList.add（ 赢）; scoreB.classList.add（lose）;} else {scoreA.classList.add（lose）; scoreB.classList.add（win）;}  

  .team {padding：8px 10px; display：inline-block;}。team：nth-​​child（1）.score {text-align：right; display：block;}。team：nth-​​child（2）{text-align：right;}。team：nth-​​child（2）.score {text-align：left; display：block;}。war {display：inline-block; background-color：＃F4F5F7; border-radius：4px;位置：相对;保证金：2px 0;}。得分{border-radius：4px; padding：1px 5px;}。score.lose {background-color：rgba（255,0,0，.1）;}。score.win {background-color：rgba（0,255,0，.15）;}  

 < script src =https：// ajax。 googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></script><div class =war> < div class =team> < span class =得分> 4< / span> < / DIV> < div class =team> < span class =得分b> 2< / span> < / div>< / div>< div class =war> < div class =team> < span class =得分> 8< / span> < / DIV> < div class =team> < span class =得分b> 5< / span> < / div>< / div>< div class =war> < div class =team> < span class =得分> 2< / span> < / DIV> < div class =team> < span class =score b> 3< / span> < / div>< / div>  

解决方案

要实现这一点，您需要选择所有 .war 元素，您可以使用 querySelectorAll（），然后遍历它们并比较子元素的分数。

另请注意，您需要将字符串分数转换为整数，否则 2 将被视为高于 12 。试试这个：

  document.querySelectorAll（'。war'）。forEach（ function（war）{var scoreA = war.getElementsByClassName（score a）[0]; var scoreB = war.getElementsByClassName（score b）[0]; if（parseInt（scoreA.innerText，10）> parseInt （scoreB.innerText，10））{scoreA.classList.add（win）; scoreB.classList.add（lose）;} else {scoreA.classList.add（lose）; scoreB.classList.add （win）;}}）;  

  .team {padding：8px 10px; display：inline-block;}。team：nth-​​child（1）.score {text-align：right; display：block;}。team：nth-​​child（2）{text-align：right;}。team：nth-​​child（2）.score {text-align：left; display：block;}。war {display：inline-block; background-color：＃F4F5F7; border-radius：4px;位置：相对;保证金：2px 0;}。得分{border-radius：4px; padding：1px 5px;}。score.lose {background-color：rgba（255,0,0，.1）;}。score.win {background-color：rgba（0,255,0，.15）;}  

 < script src =https：// ajax。 googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></script><div class =war> < div class =team> < span class =得分> 12< / span> < / DIV> < div class =team> < span class =得分b> 2< / span> < / div>< / div>< div class =war> < div class =team> < span class =得分> 8< / span> < / DIV> < div class =team> < span class =得分b> 5< / span> < / div>< / div>< div class =war> < div class =team> < span class =得分> 2< / span> < / DIV> < div class =team> < span class =score b> 3< / span> < / div>< / div>  

如果你' d更喜欢在没有明确引用 .score.a 和 .score.b 元素的情况下执行此操作，然后您可以使用 reduce 获取最高分的索引，然后根据该索引应用类：

  document.querySelectorAll（'。war'）。forEach（function（war）{var scores = Array.from（war.getElementsByClassName（score）） ; var winIndex = scores.reduce（（iMax，x，i，arr）=> parseInt（x.innerText，10）> parseInt（arr [iMax] .innerText，10）？i：iMax，0）;得分.forEach（（score，i）=> score.classList.add（winIndex == i？'win'：'lose'））;}）;  

< pre class =snippet-code-css lang-css prettyprint-override> .team {padding：8px 10px; display：inline-block;}。team：nth-​​child（1）.score {text-align：right; display：block;}。team：nth-​​child（2）{text-align：right;}。team：nth-​​child（2）.score {text-align：left; display：block;}。war {display：inline-block; background-color：＃F4F5F7; border-radius：4px;位置：相对;保证金：2px 0;}。得分{border-radius：4px; padding：1px 5px;}。score.lose {background-color：rgba（255,0,0，.1）;}。score.win {background-color：rgba（0,255,0，.15）;}

 < script src =https：// ajax。 googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></script><div class =war> < div class =team> < span class =得分> 4< / span> < / DIV> < div class =team> < span class =得分b> 2< / span> < / div>< / div>< div class =war> < div class =team> < span class =得分> 8< / span> < / DIV> < div class =team> < span class =得分b> 5< / span> < / div>< / div>< div class =war> < div class =team> < span class =得分> 2< / span> < / DIV> < div class =team> < span class =score b> 3< / span> < / div>< / div>  

I'm looking for a way to loop through all containers with a given class (.war) and being able to perform the comparation between two child elements and adding a different class to each one of them (winner / loser).

Optimizing the DOM, being able to remove .score a / .score b and leave it all with .score will be awesome if possible.

I tried iterating with child elements with javascript and jquery, with no results.

var scoreA = document.getElementsByClassName("score a")[0];
var scoreB = document.getElementsByClassName("score b")[0];

if (scoreA > scoreB) {
  scoreA.classList.add("win");
  scoreB.classList.add("lose");
} else {
  scoreA.classList.add("lose");
  scoreB.classList.add("win");
}

.team { padding: 8px 10px; display: inline-block;}.team:nth-child(1) .score { text-align: right; display: block;}.team:nth-child(2) { text-align: right;}.team:nth-child(2) .score { text-align: left; display: block;}.war { display: inline-block; background-color: #F4F5F7; border-radius: 4px; position: relative; margin: 2px 0;}.score { border-radius: 4px; padding: 1px 5px;}.score.lose { background-color: rgba(255, 0, 0, .1);}.score.win { background-color: rgba(0, 255, 0, .15);}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="war">
  <div class="team">
    <span class="score a">4</span>
  </div>
  <div class="team">
    <span class="score b">2</span>
  </div>
</div>
<div class="war">
  <div class="team">
    <span class="score a">8</span>
  </div>
  <div class="team">
    <span class="score b">5</span>
  </div>
</div>
<div class="war">
  <div class="team">
    <span class="score a">2</span>
  </div>
  <div class="team">
    <span class="score b">3</span>
  </div>
</div>

解决方案

To achieve this you need to select all the .war elements, which you can achieve with querySelectorAll(), then loop through them and compare the scores of the child elements.

Also note that you need to convert the string scores to integers, otherwise 2 would be considered higher than 12. Try this:

document.querySelectorAll('.war').forEach(function(war) {
  var scoreA = war.getElementsByClassName("score a")[0];
  var scoreB = war.getElementsByClassName("score b")[0];

  if (parseInt(scoreA.innerText, 10) > parseInt(scoreB.innerText, 10)) {
    scoreA.classList.add("win");
    scoreB.classList.add("lose");
  } else {
    scoreA.classList.add("lose");
    scoreB.classList.add("win");
  }
});

.team {
  padding: 8px 10px;
  display: inline-block;
}

.team:nth-child(1) .score {
  text-align: right;
  display: block;
}

.team:nth-child(2) {
  text-align: right;
}

.team:nth-child(2) .score {
  text-align: left;
  display: block;
}

.war {
  display: inline-block;
  background-color: #F4F5F7;
  border-radius: 4px;
  position: relative;
  margin: 2px 0;
}

.score {
  border-radius: 4px;
  padding: 1px 5px;
}

.score.lose {
  background-color: rgba(255, 0, 0, .1);
}

.score.win {
  background-color: rgba(0, 255, 0, .15);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="war">
  <div class="team">
    <span class="score a">12</span>
  </div>
  <div class="team">
    <span class="score b">2</span>
  </div>
</div>
<div class="war">
  <div class="team">
    <span class="score a">8</span>
  </div>
  <div class="team">
    <span class="score b">5</span>
  </div>
</div>
<div class="war">
  <div class="team">
    <span class="score a">2</span>
  </div>
  <div class="team">
    <span class="score b">3</span>
  </div>
</div>

If you'd prefer to do this without explicitly referencing the .score.a and .score.b elements, then you could use reduce to get the index of the highest score and then apply the classes based on that index:

document.querySelectorAll('.war').forEach(function(war) {
  var scores = Array.from(war.getElementsByClassName("score"));
  var winIndex = scores.reduce((iMax, x, i, arr) => parseInt(x.innerText, 10) > parseInt(arr[iMax].innerText, 10) ? i : iMax, 0);      
  scores.forEach((score, i) => score.classList.add(winIndex == i ? 'win' : 'lose'));
});

.team {
  padding: 8px 10px;
  display: inline-block;
}

.team:nth-child(1) .score {
  text-align: right;
  display: block;
}

.team:nth-child(2) {
  text-align: right;
}

.team:nth-child(2) .score {
  text-align: left;
  display: block;
}

.war {
  display: inline-block;
  background-color: #F4F5F7;
  border-radius: 4px;
  position: relative;
  margin: 2px 0;
}

.score {
  border-radius: 4px;
  padding: 1px 5px;
}

.score.lose {
  background-color: rgba(255, 0, 0, .1);
}

.score.win {
  background-color: rgba(0, 255, 0, .15);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="war">
  <div class="team">
    <span class="score a">4</span>
  </div>
  <div class="team">
    <span class="score b">2</span>
  </div>
</div>
<div class="war">
  <div class="team">
    <span class="score a">8</span>
  </div>
  <div class="team">
    <span class="score b">5</span>
  </div>
</div>
<div class="war">
  <div class="team">
    <span class="score a">2</span>
  </div>
  <div class="team">
    <span class="score b">3</span>
  </div>
</div>

这篇关于通过子DOM元素执行javascript操作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！