如何根據用戶輸入更改動態生成的列表框的寬度？

Question

我有一個列表框，單擊該列表框時， 將刪除相同類型的'n'個新列表框（當用戶單擊該列表框時，會在提示符下輸入n）。 這個過程是可重復的。

但是新生成的列表框的寬度不應該與原始列表框（單擊以生成新列表框的那個）相同。 如果原始列表框的寬度為“200px”，則新生成的項目的寬度應為“（200 / n）px”。

此外，我希望新生成的列表框的位置（目標）位於SAME位置作為單擊的位置，即不是在整個列表（追加）之后或者不在整個列表之前（前置）而是在同一個地方與點擊列表框一樣，一個接一個。 （如上所述，它們的寬度減少了n）。 抱歉，由於字數限制，我無法在標題中提及此內容。

我提到了推薦使用After() ， InsertAfter()等的其他答案，但我不知道如何在我的情況下實現它們，因為我是JavaScript和jQuery的新手。

HTML：

<h4>Rhythm-Ruler</h4>
<div>
   <ul class="list">
     <li></li>
   </ul>
</div> 

JavaScript的：

$("ul").delegate("li", "click", function(){
   var inputNum = prompt("Divide By:"); 
                 // 'n' input by user and stored
   if(inputNum>1){
   $(this).remove();
    }

var i;
for (i=1;i<=inputNum;i++){
   var newList=document.createElement("li");
   $(".list").append($(newList).text(i));
               //this is making them assemble 'after' the entire list 
   $(this).css('width', 200/inputNum + 'px');
               //I am dividing the width by n but its not working
   }
});

CSS：

  li {
      /*position: fixed;*/
      float: left;
      list-style: none;
      width: 200px;
      height: 30px;
      box-shadow:0 -1px 1em hsl(60, 60%, 84%) inset;
      background-color: #FF7F50;
      display: inline;
      text-align: center;
      padding: 2px;
      }

JSFiddle： https ：//jsfiddle.net/yoshi2095/gwpf42ds/6/

Answer 1

用工作示例更新了小提琴。

https://jsfiddle.net/z90hg3z5/

$("ul").delegate("li", "click", function()
{
   var inputNum = prompt("Divide By:");
   if(inputNum>1){
       var i;
       var w = $(this).width();
       $(this).remove();
       var newW = w/inputNum;
    }
    else 
    {
         newW = w;
    }
    for (i=1;i<=inputNum;i++)
    {
        var newList=document.createElement("li");
        $(".list").append($(newList).text(i));
        $(newList).css('width', newW);
    }
});

說明。 您需要獲取單擊元素的寬度，以便您可以進行數學運算，將其除以輸入數字。 然后刪除原始元素。

更新了代碼以在正確的位置插入新元素。

$("ul").delegate("li", "click", function()
{
    var inputNum = prompt("Divide By:");
    if(inputNum>1)
    {
         var i;
         var w = $(this).width();
         var newW = w/inputNum;
     }
     else 
     {
         newW = w;
     }
     for (i=1;i<=inputNum;i++)
     {
         var newList=document.createElement("li");
         $(newList).text(i).css('width', newW).insertAfter($(this));
     }
});

編輯的代碼格式