Перемешивание столбца таблицы с использованием JQuery

Question

Попытка перетасовать столбцы таблицы.

Попробовал приведенный ниже код, но он не перемешивается вообще.

Мне нужно перетасовать первые четыре параметра.

window.onload = function() {
  $("div.question_div").randomize("span.tdran");
};


(function($) {

  $.fn.randomize = function(tree, childElem) {
    return this.each(function() {
      var $this = $(this);
      if (tree) $this = $(this).find(tree);
      var unsortedElems = $this.children(childElem);
      var elems = unsortedElems.clone();

      elems.sort(function() {
        return (Math.round(Math.random()) - 0.5);
      });

      for (var i = 0; i < elems.length; i++)
        unsortedElems.eq(i).replaceWith(elems[i]);
    });
  };

})(jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Question 3
<div class="question_div">
  <table>
    <tr>
      <td colspan="4">
        <p>In a camp, there is a meal for 200 children or 120 men. If 150 children have taken the meal, how many men will be served with the remaining meal?</p>
      </td>
    </tr>
    <tr>
      <span class="tdran">
        <td><input type="radio" name="radio3" id="checka3" value="A"></td>
        <td><label for="checka3">
            <p>31</p>
          </label></td>
      </span>
      <span class="tdran">
        <td><input type="radio" name="radio3" id="checkb3" value="B"></td>
        <td><label for="checkb3">
            <p>30</p>
          </label></td>
      </span>
    </tr>
    <tr>
      <span class="tdran">
        <td><input type="radio" name="radio3" id="checkc3" value="C"></td>
        <td><label for="checkc3">
            <p>29</p>
          </label></td>
      </span>
      <span class="tdran">
        <td><input type="radio" name="radio3" id="checkd3" value="D"></td>
        <td><label for="checkd3">
            <p>35</p>
          </label></td>
      </span>
    </tr>
    <tr>
      <td><input type="radio" name="radio3" id="checke3" value="E"></td>
      <td><label for="checke3">
          <p>None of these</p>
        </label></td>
    </tr>
  </table>
</div>
<hr>
</br>

Попытка перетасовать столбцы таблицы.

Попробовал приведенный ниже код, но он вообще не перемешивается.

Мне нужно перетасовать первые четыре параметра.

---

Могу ли я получить дополнительное примечание о том, как убрать пробелы между двумя параметрами и между переключателем и значением?

Answer 1

Ваша HTML разметка недействительна - невозможно обернуть <td> <span>, единственный допустимый дочерний элемент <tr> - <td>. Хотя можно произвольно изменять порядок ячеек таблицы, я предлагаю использовать <div> s, поскольку это намного проще.

window.onload = function() {
  randomize();
};

function randomize() {
  let questions = $(".question_div");
  let divCollection = questions.find(".ran");
  let divs  = Array.from(divCollection);
  shuffleArray(divs);
  for (const div of divs) {
    questions.append(div);
  }
}

function shuffleArray(array) {
  for (var i = array.length - 1; i > 0; i--) {
    var j = Math.floor(Math.random() * (i + 1));
    var temp = array[i];
    array[i] = array[j];
    array[j] = temp;
  }
}

label {
  display: inline-block;
  margin-left: 5px;
}

.ran {
  float: left;
  width: 200px;
}

div:nth-child(even) {
  clear: left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Question 3
<div class="question_div">
  <p>In a camp, there is a meal for 200 children or 120 men. If 150 children have taken the meal, how many men will be served with the remaining meal?</p>
  <div class="ran">
    <input type="radio" name="radio3" id="checka3" value="A">
    <label for="checka3">
      <p>31</p>
    </label>
  </div>
  <div class="ran"><input type="radio" name="radio3" id="checkb3" value="B"><label for="checkb3">
      <p>30</p>
    </label>
  </div>
  <div class="ran"><input type="radio" name="radio3" id="checkc3" value="C"><label for="checkc3">
      <p>29</p>
    </label>
  </div>
  <div class="ran"><input type="radio" name="radio3" id="checkd3" value="D"><label for="checkd3">
      <p>35</p>
    </label>
  </div>
  <div class="ran"><input type="radio" name="radio3" id="checke3" value="E"><label for="checke3">
      <p>None of these</p>
    </label>
  </div>
</div>

Чтобы увеличить расстояние между столбцами, просто увеличьте ширину в классе .ran. Рабочая Скрипка . Я использовал этот ответ для своего ответа: Javascript: строки таблицы в случайном порядке

Обновление: предлагаемое решение работает только с одним вопросом. Чтобы обработать больше вопросов, я внес следующие изменения, используя each():

window.onload = function() {
  randomize();
};

function randomize() {
  let questions = $(".question_div");

  questions.each(function() {
    let divCollection = $(this).find(".ran");
    let divs = Array.from(divCollection);
    shuffleArray(divs);
    for (const div of divs) {
      $(this).append(div);
    }
  });


}

function shuffleArray(array) {
  for (var i = array.length - 1; i > 0; i--) {
    var j = Math.floor(Math.random() * (i + 1));
    var temp = array[i];
    array[i] = array[j];
    array[j] = temp;
  }
}

label {
  display: inline-block;
  margin-left: 5px;
}

.ran {
  float: left;
  width: 200px;
}

div.ran:nth-child(odd) {
  clear: left;
}
.question_div {
  display:inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="question_div">
<p>
Question 4
</p>
  <p>In a camp, there is a meal for 200 children or 120 men. If 150 children have taken the meal, how many men will be served with the remaining meal?</p>
  <div class="ran">
    <input type="radio" name="radio3" id="checka3" value="A">
    <label for="checka3">
      <p>31</p>
    </label>
  </div>
  <div class="ran"><input type="radio" name="radio3" id="checkb3" value="B"><label for="checkb3">
      <p>30</p>
    </label>
  </div>
  <div class="ran"><input type="radio" name="radio3" id="checkc3" value="C"><label for="checkc3">
      <p>29</p>
    </label>
  </div>
  <div class="ran"><input type="radio" name="radio3" id="checkd3" value="D"><label for="checkd3">
      <p>35</p>
    </label>
  </div>
  <div class="ran"><input type="radio" name="radio3" id="checke3" value="E"><label for="checke3">
      <p>None of these</p>
    </label>
  </div>

</div>

<div class="question_div">
<p>
Question 4
</p>
<p>In a camp, there is a meal for 200 children or 120 men. If 150 children have taken the meal, how many men will be served with the remaining meal?</p>
  <div class="ran">
    <input type="radio" name="radio4" id="checka4" value="A">
    <label for="checka4">
      <p>31</p>
    </label>
  </div>
  <div class="ran"><input type="radio" name="radio4" id="checkb4" value="B"><label for="checkb4">
      <p>30</p>
    </label>
  </div>
  <div class="ran"><input type="radio" name="radio4" id="checkc4" value="C"><label for="checkc4">
      <p>29</p>
    </label>
  </div>
  <div class="ran"><input type="radio" name="radio4" id="checkd4" value="D"><label for="checkd4">
      <p>35</p>
    </label>
  </div>
  <div class="ran"><input type="radio" name="radio4" id="checke4" value="E"><label for="checke4">
      <p>None of these</p>
    </label>
  </div>

</div>