Question

我想使用无序列表创建表单ul必须只有两个级别，我在这个演示中没有得到：

当我添加一个子列表时，它会添加一个父列表的子列表（很好）但是当我添加另一个子列表时，它会为新添加的子列表添加一个子列表（我不想要）。我想在添加子列表时只添加父列表的1个子列表，而不是添加新添加的子列表的子列表。

当前结构：

<ul>
    <li><input type="text" />
        <ul>
            <li><input type="text" /></li> // New added sub list
                <ul> //It should'nt be like this when added more 
                    <li><input type="text" /></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

结构应该是这样的：

<ul>
    <li><input type="text" />
        <ul>
            <li><input type="text" /></li> // New added sub list
            <li><input type="text" /></li> //It should be like this when added more
        </ul>
    </li>
</ul>

被修改 最后得到了解决方案参见Workin Demo：http://jsfiddle.net/rathoreahsan/2hwLp/

Answer 1

<强> JQUERY

$.fn.exists = function(){ return this.length>0; }    
function dBtnClick(val){
    if( $('#duties li#' + val + ' ul.sublists').exists() ) 
    {
       $('#duties li#' + val + ' ul.sublists').append('<li><input type="text" /></li>')
    } 

   else if( !$('#duties li#' + val + ' ul.sublists').exists() ) 
   {
     $("#duties li#" + val).append('<ul class="sublists"><li><input type="text" /></li></ul>')
   }
}


var dutiesListID = $('#duties li#0').attr('id');
var d_cur_no = parseInt(dutiesListID);

$('#dr').click(function(){
    d_cur_no++;
    $('#duties').append('<li id="' + d_cur_no + '"><input type="text" />&nbsp;&nbsp;<a href="javascript:void(0)" onclick="dBtnClick(' + d_cur_no + ');">Add Sub List Item</a></li>');
});

<强> HTML：

<h3>Duties and Responsibilities:</h3>
<ul id="duties">
    <li id="0"><input type="text" />&nbsp;&nbsp;<a href="javascript:void(0)" class="dbtn" onclick="dBtnClick(0)">Add Sub List Item</a></li>
</ul>
<span class="controls">
    <a href="javascript:void(0)" id="dr">Add List Item</a>
</span>

<强>样本： http://jsfiddle.net/rathoreahsan/2hwLp/

Answer 2

这可能有效：

在这里更改html部分：

<ul id="duties">
    <li class="top-level"><input type="text" /></li>
</ul>

和js在这里：

$('#dr-sub').click(function(){
$('.top-level').last().append('<ul><li><input type="text" /></li></ul>');

}）;

Answer 3

尝试改变它：

$('#duties li').last().append('<li><input type="text" /></li>');

添加/删除无序列表/子列表（两级）Jquery

3 个答案: