Question

我希望能够无限地添加孩子/孙子/伟大的孩子/等。我正在制作这棵树。目前我已将它设置为只有3级深度，我无法找到一种方法让它像用户想要的那样深。

HTML

<div class="tag-tree">
<ul id="addParent">
  <li class="root" class="add-child">
    <input /> <p class="add-child-field"><i class="fa fa-plus"></i></p>
  </li>
  <li>
    <input />  <p class="add-gc-field"><i class="fa fa-plus"></i></p>      
    <ul> 
  <li><input /></li>
  <li><input /></li>
  <li><input /></li>
    </ul> 
  </li>
  <li><input /> <p class="add-gc-field"><i class="fa fa-plus"></i></p>   </li>
  <li>
    <input /> <p class="add-gc-field"><i class="fa fa-plus"></i></p>   
<ul>
  <li><input /></li>
  <li><input /></li>
</ul>  
  </li>
</ul>  
<div class="add-field"><i class="fa fa-plus"></i> New Parent Tag</div>
</div>

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

http://jsfiddle.net/y6ekn7d2/

Answer 1

我冒昧地简化了你的代码。

为了维持任意数量的级别，我处理了除根节点之外的所有输入。这样他们都执行相同的代码来维护他们的子列表。但是为了防止混乱，我在所有输入元素中添加了“级别”索引。

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

这是你的小提琴的修改版本

http://jsfiddle.net/y6ekn7d2/2/

Answer 2

如果代码略有变化，可以：https://jsfiddle.net/erkaner/y6ekn7d2/7/

*************************************
Waiting on bqjob_r4ca10491_0000014ce70963aa_1 ... (412s) Current status: DONE
BigQuery error in load operation: Error processing job
'orders:bqjob_r4ca10491_0000014ce70963aa_1': Too few columns: expected
11 column(s) but got 1 column(s). For additional help: http://goo.gl/RWuPQ
Failure details:
- File: 844 / Line:1: Too few columns: expected 11 column(s) but got
1 column(s). For additional help: http://goo.gl/RWuPQ

**********************************

Answer 3

以后我写这段代码:)

$(document).on('click', ".add-child-field", function() {
  $(this).parent("li").find('ul').first().append('<li><input /><p class="add-child-field"><i class="fa fa-plus"></i></p><ul></ul></li>');
});
$(".add-field").click(function() {
  $('#addParent').append('<li><input /><p class="add-child-field"><i class="fa fa-plus"></i></p><ul></ul></li>')
});

* {
  margin: 0px;
  padding: 0px;
}

body {
  margin: 50px;
  font-family: 'roboto';
  font-size: 13px;
}

ul {
  margin: 0px 0px 0px 20px;
  list-style: none;
  line-height: 2em;
  font-family: Arial;
}
ul li {
  font-size: 16px;
  position: relative;
}
ul li:before {
  position: absolute;
  left: -15px;
  top: 0px;
  content: '';
  display: block;
  border-left: 1px solid #ddd;
  height: 1em;
  border-bottom: 1px solid #ddd;
  width: 10px;
}
ul li:after {
  position: absolute;
  left: -15px;
  bottom: -7px;
  content: '';
  display: block;
  border-left: 1px solid #ddd;
  height: 100%;
}
ul li.root {
  margin: 0px 0px 0px -20px;
}
ul li.root:before {
  display: none;
}
ul li.root:after {
  display: none;
}
ul li:last-child:after {
  display: none;
}

.add-field {
  cursor: pointer;
  color: #404040;
  margin-top: 5px;
  margin-left: 20px;
  font-size: 13px;
}

.add-child-field, .add-child-field, .add-gc-field {
  display: inline;
  cursor: pointer;
  color: #404040;
  font-size: 13px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="tag-tree">
  <ul id="addParent">
    <li class="root" class="add-child">
      <input />
      <p class="add-child-field"><i class="fa fa-plus"></i></p>
      <ul></ul>
    </li>
    <li>
      <input />
      <p class="add-child-field"><i class="fa fa-plus"></i></p>
      <ul>
        <li>
          <input />
          <p class="add-child-field"><i class="fa fa-plus"></i></p>
          <ul></ul>
        </li>
        <li>
          <input />
          <p class="add-child-field"><i class="fa fa-plus"></i></p>
          <ul></ul>
        </li>
        <li>
          <input />
          <p class="add-child-field"><i class="fa fa-plus"></i></p>
          <ul></ul>
        </li>
      </ul>
    </li>
    <li>
      <input />
      <p class="add-child-field"><i class="fa fa-plus"></i></p>
      <ul></ul>
    </li>
    <li>
      <input />
      <p class="add-child-field"><i class="fa fa-plus"></i></p>
      <ul>
        <li>
          <input />
          <p class="add-child-field"><i class="fa fa-plus"></i></p>
          <ul></ul>
        </li>
        <li>
          <input />
          <p class="add-child-field"><i class="fa fa-plus"></i></p>
          <ul></ul>
        </li>
      </ul>
    </li>
  </ul>
  <div class="add-field"><i class="fa fa-plus"></i> New Parent Tag</div>
</div>

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

3 个答案: