Question

我正在寻找一种方法，以循环访问具有给定类（.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("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>

Answer 1

要实现此目的，您需要选择所有.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;
  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>

如果您希望在不显式引用.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);      
  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操作

1 个答案: