1

I have following HTML

<div id="arrow_box">
        <a href="javascript:void(0)" class="popupclose" title="Close">+</a>
        <h2>Plan your tasks</h2>
        <ul class="taskstimings">
            <li id="1">
                <select name="">
                    <option value="">Eds Net - Design landing page</option>
                    <option value="">Eds Net - Design user page</option>
                </select>
            </li>
            <li id="2">
                <label class="txtdatewrapper">
                   <input id="2" type="text" class="txtdate" placeholder="Select Date"/>
                   <span class="txtdateicon"></span>
                </label>
                <input id="21" type="text" class="txthours" placeholder="Hrs" />
                <a href="javascript:void(0)" class="btnadd" title="Add"></a>

            </li>
            <li id="3">
                <label class="txtdatewrapper">
                   <input id="3" type="text" class="txtdate" placeholder="Select Date"/>
                   <span class="txtdateicon"></span>
                </label>
                <input id="31" type="text" class="txthours" placeholder="Hrs" />
                <a href="javascript:void(0)" class="btnadd" title="Add"></a>
                <a href="javascript:void(0)" class="btndelete" title="Delete"></a>
            </li>

            <li id="4">
                <label class="txtdatewrapper">
                   <input id="4" type="text" class="txtdate" placeholder="Select Date"/>
                   <span class="txtdateicon"></span>
                </label>
                <input id="41" type="text" class="txthours" placeholder="Hrs" />
                <a href="javascript:void(0)" class="btnadd" title="Add"></a>
                <a href="javascript:void(0)" class="btndelete" title="Delete"></a>
            </li>
        </ul>
        <div class="btn-wrapper">
        <a href="javascript:void(0)">Reset</a>
        <a href="javascript:void(0)" class="submit">Save</a>
        </div>
    </div>

I have to append such kind of li

<li id="5">
                <label class="txtdatewrapper">
                   <input id="51" type="text" class="txtdate" placeholder="Select Date"/>
                   <span class="txtdateicon"></span>
                </label>
                <input id="521" type="text" class="txthours" placeholder="Hrs" />
                <a href="javascript:void(0)" class="btnadd" title="Add"></a>
                <a href="javascript:void(0)" class="btndelete" title="Delete"></a>
            </li>

in Ul before save and reset button

Now i want to add a new set of li in dynamically with jquery, i get some set of help, but I am very poor in jquery so i am not able to get it worked

Please can give some sot of code..

Thanks

4

1 回答 1

1

尝试这个：

var existing_li = $('ul.taskstimings li').length + 1;
var new_li = $('<li></li>').prop('id', existing_li);
var new_html = '<label class="txtdatewrapper">' +
    '<input id="51" type="text" class="txtdate" placeholder="Select Date"/>' +
    '<span class="txtdateicon"></span>' +
    '</label>' +
    '<input id="521" type="text" class="txthours" placeholder="Hrs" />' +
    '<a href="javascript:void(0)" class="btnadd" title="Add"></a>' +
    '<a href="javascript:void(0)" class="btndelete" title="Delete"></a>';
new_li.html(new_html);
$('ul.taskstimings').append(new_li);

演示在这里

于 2013-10-09T06:45:20.240 回答