Попытка оценить порядок после случайного воспроизведения - JSFiddle включен - PullRequest
Новая
       8

Попытка оценить порядок после случайного воспроизведения - JSFiddle включен

0 голосов
/ 07 июня 2018

Я перетасовываю элементы в строке в таблице, используя базовую функцию перетасовки: 

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>         
    <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, чтобыопределить местоположение каждого элемента после перестановки (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> останется в том же месте, чтопозволил бы мне определить местоположение после перестановки, но, похоже, это не сработало.

Я был бы очень признателен за любую помощь, которую кто-либо может предложить.

1 Ответ

0 голосов
/ 07 июня 2018

Вот рабочий пример того, что вам нужно. (Но я настоятельно рекомендую изменить ваш код в сторону лучшего дизайна) 

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>
...