如何根据用户输入更改动态生成的列表框的宽度？

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));
     }
});

修改代码格式