Question

我有以下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>

我必须追加这样的李

<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>

在保存和重置按钮之前中的

现在我想用jquery动态添加一组新的li，我得到了一些帮助，但我在jquery中很穷，所以我无法让它工作

请提供一些代码..

由于

Answer 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);

用jquery添加一组li

1 个答案:

演示here