0

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

http://jsfiddle.net/rathoreahsan/9SCCn/

当我添加一个子列表时，它会添加一个父列表的子列表（很好），但是当我添加另一个子列表时，它会为新添加的子列表添加一个子列表（我不想要）。我希望当我添加子列表时，它只添加父列表的 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/

4

3 回答 3

3

查询

$.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/

于 2012-06-28T10:00:29.737 回答
0

这可能有效：

在此处更改 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>');

});

于 2012-06-12T07:04:16.563 回答
0

尝试像这样更改它：

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

于 2012-06-12T07:08:05.027 回答