计算jQuery中有多少兄弟姐妹(当前元素右侧)包含指定的类

Question

我正在研究一个囚犯问题的例子。

基本上，7名囚犯被排成一行，随机地给他们一顶黑色或白色的帽子。最高的人在后面，可以看到所有其他人的帽子一直到前面。

每个人都必须猜出他们帽子的颜色，但是囚犯不能互相交谈，他们只能说黑色或白色。

解决办法是让后面的囚犯说是黑还是白，这完全取决于他的视线中是否有偶数的黑帽子。如果数字是奇数，他会猜白等，直到所有囚犯都做完为止。

我可以逐一翻阅每一顶帽子，但我的主要问题是弄清楚目前的囚犯如何才能穿过前面的帽子，只对他们视线中的东西发出黑/白的叫声，以及数量是奇数还是偶数。

我猜这个谜题的主要部分是确定如何将所有兄弟姐妹都放到当前兄弟类的右侧，并获得blackHat类中所有hats的运行总数。

​

var totalEven = 0;

//for each of the <li> elements
$("#list li").each(function() {
  //set range to get random value from array
  var range = Math.round(Math.random() * 1);
  //array of hat classes
  var randomHat = ["whiteHat", "blackHat"];
  //add random class to each <li> element
  $(this).addClass(randomHat[range]);
});

//once elements have been updated
$("#list li").each(function() {
  //get the index of the currently selected li
  var isEven = getIfEven($(this));
  //append result
  $("#resultslist").append("<li class='result'>" + isEven + "</li>");
});

function getIfEven(currentHat)
{
  //here is the main issue
  var totalBlackHats = $(currentHat).siblings().hasClass("blackHat").length;

  //this returns undefined
  console.log(totalBlackHats);
  
  //determine if odd/even
  if( totalBlackHats % 2 )
    return true;
  else
    return false;
}

.whiteHat {
  background: white;
}
.blackHat {
  background: black;
}
.hat {
  height: auto;
  border: 1px solid black;
  margin: 5px;
  color: red;
  padding: 5px;
  text-align: center;
}
.container {
  border: 1px solid black;
  width: 48%;
  float: left;
  margin: 3px;
}
.result {
  height: auto;
  border: 1px solid black;
  margin: 5px;
  padding: 5px;
}
ol{
  list-style-type: none;
  margin: 0;
  padding: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <ol id="list">
    <li class="hat">1st hat</li>
    <li class="hat">2nd hat</li>
    <li class="hat">3rd hat</li>
    <li class="hat">4th hat</li>
    <li class="hat">5th hat</li>
    <li class="hat">6th hat</li>
    <li class="hat">7th hat</li>
  </ol>
</div>
<div id="results" class="container">
  <ol id="resultslist"></ol>
</div>

​

var totalBlackHats = $(currentHat).siblings().hasClass("blackHat").length;似乎返回未定义的内容。

Answer 1

​

var totalEven = 0;

//for each of the <li> elements
$("#list li").each(function() {
  //set range to get random value from array
  var range = Math.round(Math.random() * 1);
  //array of hat classes
  var randomHat = ["whiteHat", "blackHat"];
  //add random class to each <li> element
  $(this).addClass(randomHat[range]);
});

//once elements have been updated
$("#list li").each(function() {
  //get the index of the currently selected li
  var isEven = getIfEven($(this));
  //append result
  $("#resultslist").append("<li class='result'>" + isEven + "</li>");
});

function getIfEven(currentHat)
{
  //here is the main issue
  var totalBlackHats = $(currentHat).siblings().filter(".blackHat").length;

  //this returns undefined
  console.log(totalBlackHats);
  
  //determine if odd/even
  if( totalBlackHats % 2 )
    return true;
  else
    return false;
}

.whiteHat {
  background: white;
}
.blackHat {
  background: black;
}
.hat {
  height: auto;
  border: 1px solid black;
  margin: 5px;
  color: red;
  padding: 5px;
  text-align: center;
}
.container {
  border: 1px solid black;
  width: 48%;
  float: left;
  margin: 3px;
}
.result {
  height: auto;
  border: 1px solid black;
  margin: 5px;
  padding: 5px;
}
ol{
  list-style-type: none;
  margin: 0;
  padding: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <ol id="list">
    <li class="hat">1st hat</li>
    <li class="hat">2nd hat</li>
    <li class="hat">3rd hat</li>
    <li class="hat">4th hat</li>
    <li class="hat">5th hat</li>
    <li class="hat">6th hat</li>
    <li class="hat">7th hat</li>
  </ol>
</div>
<div id="results" class="container">
  <ol id="resultslist"></ol>
</div>

​