尝试在洗牌后评估订单 - 包括 JSFiddle

Question

我正在使用基本随机播放功能随机播放 table 中的一行项目：

var ratings = ['rating0','rating1','rating2','rating3'];

var shuffle = function(arr) {
    for(var j, x, i = arr.length; i; j = parseInt(Math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x);
    return arr;
}
shuffle(ratings);

$("#rating0").html(ratings[0]);
$("#rating1").html(ratings[1]);
$("#rating2").html(ratings[2]);
$("#rating3").html(ratings[3]);
$("#rating4").html(ratings[4]);

评分随后会显示为 table 中的一行条目：

<table>         
    <tr id="ColumnLabels">
        <td>Column 1</td>
        <td>Column 2</td>
         <td>Column 3</td>
          <td>Column 4</td>
    </tr>
    <tr>
        <td id = "rating1"></td>
        <td id = "rating0"></td>
        <td id = "rating2"></td>
         <td id = "rating3"></td>
    </tr>
</table>

如以下 JSFiddle 所示，我想评估洗牌后项目的顺序，以确定出现 Rating1 的列：http://jsfiddle.net/HT89v/38/

我尝试使用 .parent().hasClass 来确定每个项目的 post-随机播放位置 (http://jsfiddle.net/HT89v/48/)：

   <tr>
        <span class="column1"><td id = "rating1"></td></span>
        <span class="column2"><td id = "rating0"></td></span>
        <span class="column3"><td id = "rating2"></td></span>
         <span class="column4"><td id = "rating3"></td></span>
    </tr>

$(function () {
    if ($('#rating1').parent().hasClass('column1')) {
        alert('column1');
    }
});

我认为 <td> 会洗牌，但每个 <span> 都会留在同一个地方，这样我就可以识别 post-洗牌的位置；但是，这似乎不起作用。

如果有人能提供任何帮助，我将不胜感激。

Answer 1

这是您需要的工作示例。（但我强烈建议更改您的代码以实现更好的设计）

var ratings = ['rating0','rating1','rating2','rating3'];


var shuffle = function(arr) {
    for(var j, x, i = arr.length; i; j = parseInt(Math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x);
    return arr;
}
shuffle(ratings);
//ratings[4] = Math.round(Math.random() * 3) + 7;



$("#rating0").html(ratings[0]);
$("#rating1").html(ratings[1]);
$("#rating2").html(ratings[2]);
$("#rating3").html(ratings[3]);

$(function () {
    $("#rowRatings").find('td.ratings').each(function(index) {
      if($(this).text()=="rating1")
      {
       //Result would be the column name that has same index as that of the one with value "rating1"
       $("#result").text($('#ColumnLabels td:nth-child('+ (index+1)+')').text());
        
      }
    });      
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
"rating1" is under <span id="result"></span>
<br>
<br>
<br>

<table>   
    <tr id="ColumnLabels">
        <td>Column 1</td>
        <td>Column 2</td>
         <td>Column 3</td>
          <td>Column 4</td>
          
    </tr>
    <tr id="rowRatings">
        <td id = "rating0" class="ratings"></td>
        <td id = "rating1" class="ratings"></td>
        <td id = "rating2" class="ratings"></td>
        <td id = "rating3" class="ratings"></td>        
    </tr>
</table>

尝试在洗牌后评估订单 - 包括 JSFiddle

Trying to evaluate order after a shuffle - JSFiddle included

javascript

jquery

shuffle

html-table