0

順序付けされていないリストを使用してフォームを作成したいのですulが、このデモでは取得できないレベルが2つしかない必要があります。

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

サブリストを追加すると、親リストのサブリストが1つ追加されますが（問題ありません）、別のサブリストを追加すると、新しく追加されたサブリストのサブリストが追加されます（不要です）。サブリストを追加するときに、新しく追加されたサブリストのサブリストを追加するのではなく、親リストのサブリストを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デモを参照してください：http：//jsfiddle.net/rathoreahsan/2hwLp/

4

3 に答える 3

3

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/

于 2012-06-28T10:00:29.737 に答える
0

次のように変更してみてください。

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

于 2012-06-12T07:08:05.027 に答える
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 に答える