составить сортируемый список JS из массива - PullRequest
Новая
       16

составить сортируемый список JS из массива

0 голосов
/ 31 января 2019

Я пытаюсь составить из массива зашифрованных предложений неупорядоченные списки для применения сортируемого JS в следующем формате 

<ul id="sortable" class="div3">
<li id = 'number'> </li>
<li id="1" class="ui-state-default">The</li>
<li id="2" class="ui-state-default">piano</li>
<li id="3" class="ui-state-default">play</li>
<li id="4" class="ui-state-default">I</li> 
</ul>
<script>

До сих пор я придумал следующее, которое не дает правильный формат 

     <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>my array to list attempt</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">

  <script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
  <script src="https://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>

<style>
li {
list-style:none;
display: inline;
}

</style>
</head>
<body>
<script>
 function makeQuest() {
  var quest=['I play piano the can', 'tired I am', 'are seven there week in a days'];

  for (var i=0; i< quest.length; i++){
        document.write('<ul class ="div3">')
        document.write('<li id = "number">' + (i + 1) +  ' '+ '</li>')
    for (var j=0; j < quest[i].length; j++){
        document.write('<li>' + quest[i][j] + '</li>')
        document.write('</ul>')
            }
        }       
 };

 $(function makeSort() {
    $( ".div3" ).sortable({
      items: "li:not(#number)"

    });

    $( ".div3" ).disableSelection();

   });
</script>

<script>
 makeQuest()
 makeSort()
</script>
</body>
</html>

Я не программист: просто пытаюсь сделать языкового репетитора для личного пользования.Спасибо за любую помощь

1 Ответ

0 голосов
/ 31 января 2019

Это работает для меня, и сортируется 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>my array to list attempt</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">

    <script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>

    <style>
        li {
            list-style:none;
            display: inline;
        }

    </style>
</head>
<body>
<ul id="sortable" class="div3">
    <li id = 'number'> </li>
    <li id="1" class="ui-state-default">The</li>
    <li id="2" class="ui-state-default">piano</li>
    <li id="3" class="ui-state-default">play</li>
    <li id="4" class="ui-state-default">I</li>
</ul>
<script>
    $(function makeSort() {
        $( ".div3" ).sortable({
            items: "li:not(#number)"

        });

        $( ".div3" ).disableSelection();

    });
</script>
</body>
</html>
...