Jquery 如何将子项无限添加到此列表树？

我希望能够无限地将孩子/孙子/曾孙/等添加到我正在制作的这棵树上。目前我已经把它设置好了，所以它只有3个层次的深度，我想不出一个方法让它达到用户想要的深度

HTML

新父标记

jQuery

$(".add-field").click(function() {
  $('#addParent').append('<li class="root" id="addChild"><input /> <p class="add-child-field" onclick="add_child();"><i class="fa fa-plus"></i></p></li>')
});

$(document).on('click', ".add-child-field", function() {
  $(this).parent().after('<li><input /><p class="add-gc-field"><i class="fa fa-plus"></i></p> </li>');
});



$(document).on('click', ".add-gc-field", function() {
  if ($(this).next('ul').length) {
    console.log(this)
    $(this).next('ul').append('<li><input /></li>');
  }
  else {
    console.log(this)
    $(this).after('<ul><li><input /></li></ul>');
    }
});

$（“.add字段”）。单击（函数（）{
$（“#addParent”）.append（“
/li>”）
});
$（文档）。在（'单击'，“。添加子字段”，函数（）{
$（this）.parent（）之后（'
）；
});
$（文档）。在（'单击'，“。添加gc字段”，函数（）{
if（$（this）.next（'ul'）.length）{
console.log（这个）
$（this.next（'ul'）。追加（'
'）；
}
否则{
console.log（这个）
美元（本）。之后（“
”）；
}
});

---

我冒昧地简化了您的代码

为了保持任意数量的级别，我对所有输入进行了相同的处理，除了根输入。 所以它们都执行相同的代码来维护它们的子列表。但是为了防止混淆，我添加了所有输入元素的“level”索引

这是你的小提琴的改进版

---

只要对代码稍作更改，就有可能：

$（document）.on（'click'，.add gc field'，function（）{
if（$（this）.next（'ul'）.length）{
console.log（this）；
$（this）.next（'ul'）.append（'li>
）；
}否则{
console.log（这个）
$（此）.after（“
”）；
}
});

过了一段时间，我写了以下代码：）

$（document）.on（'click'，“.add child field”，function（））{
$（this.parent（“li”）.find（“ul”）.first（）.append（“
”）；
});
$（“.add字段”）。单击（函数（）{
$（“#addParent”）.append（“
”）
});
*{
边际：0px；
填充：0px；
}
身体{
利润率：50像素；
字体系列：“roboto”；
字体大小：13px；
}
保险商实验室{
保证金：0px 0px 0px 20px；
列表样式：无；
线高：2米；
字体系列：Arial；
}
ulli{
字体大小：16px；
位置：相对位置；
}
李：以前{
位置：绝对位置；
左：-15px；
顶部：0px；
内容：''；
显示：块；
左边框：1px实心#ddd；
高度：1米；
边框底部：1px实心#ddd；
宽度：10px；
}
ul li：之后{
位置：绝对位置；
左：-15px；
底部：-7px；
内容：''；
显示：块；
左边框：1px实心#ddd；
身高：100%；
}
根{
保证金：0px 0px 0px-20px；
}
根：之前{
显示：无；
}
ul li.根：之后{
显示：无；
}
最后一个孩子：之后{
显示：无；
}
.添加字段{
光标：指针；
颜色：#404040；
边缘顶部：5px；
左边距：20px；
字体大小：13px；
}
.add子字段、.add子字段、.add gc字段{
显示：内联；
光标：指针；
颜色：#404040；
字体大小：13px；
}









































新父标记
您可以像这样在单击函数中添加“.add gc field”
$(".add-field").click(function() {
  $('#addParent').append('<li class="root" id="addChild"><input /> <p class="add-child-field" onclick="add_child();"><i class="fa fa-plus"></i></p></li>')
});

$(document).on('click', ".add-child-field", function() {
  $(this).parent().after('<li><input /><p class="add-gc-field"><i class="fa fa-plus"></i></p> </li>');
});



$(document).on('click', ".add-gc-field", function() {
  if ($(this).next('ul').length) {
    console.log(this)
    $(this).next('ul').append('<li><input /></li>');
  }
  else {
    console.log(this)
    $(this).after('<ul><li><input /></li></ul>');
    }
});

<li>
  <input data-level="XXX" />
  <p class="add-field">
    <i class="fa fa-plus"></i>
  </p>
</li>

$(document).on('click', ".add-gc-field", function () {
    if ($(this).next('ul').length) {
        console.log(this);
        $(this).next('ul').append('<li><input /><p class="add-gc-field"><i class="fa fa-plus"></i></p> </li>');
    } else {
        console.log(this)
        $(this).after('<ul><li><input /><p class="add-gc-field"><i class="fa fa-plus"></i></p> </li></ul>');
    }
});