如何使用jquery在最后添加LI

时间:2012-08-17 07:06:08

标签: jquery html

我要求如果用户点击某个按钮,那么li应该附加在ul的最后一个,其数量应该会增加。

<head>
    <style>

    .bill ul{ list-style:none}
    .bill ul li{ float:left; width:94px; margin-right:18px}
    .bill ul li:last-child { margin-right:0}
    .bill + ul { border:solid 1px #FF0000}

    </style>
    <script type="text/javascript" src="jquery-1.7.2.js"></script>
    <script type="text/javascript">

        $(function () {

            $('.bill').find('a').click(function () {

                var jammu = $('.bill').find('li').length;
            }
        )
        })
    </script>
</head>
<body>
    <div class="bill">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <a href="#">Click to increase</a>
    </div>
</body>

5 个答案:

答案 0 :(得分:1)

以下是基于您的代码的解决方案:

var jammu=$('.bill').find('li').length + 1;
$("<li />")
    .html(jammu++)
    .appendTo($('.bill').find('ul'));

JSFiddle

答案 1 :(得分:0)

你可以这样做。

   $('.bill').find('a').click(function (){
      var jammu=$('.bill').find('li').length;
      $('.bill').find('ul').append('<li>' + (jammu+1) + '</li>') ;
     });

Live Demo

答案 2 :(得分:0)

试试这个

$('div.bill a').click(function() {
    var li_number = $('.bill ul li ').length;
    $('div.bill ul').append('<li>'+(li_number+1)+'</li>');  
});​

答案 3 :(得分:0)

另:

var n = $('.bill ul li').length;

$('.bill a').click(function(){

    n++;
    $('<li />').html(n).appendTo('.bill');

});

答案 4 :(得分:0)

应该是这样:

var $bill = $('.bill');
$('a', $bill).click(function (){
    var number = $('li:last', $bill).text();
    number = +number + 1;
    $('ul', $bill).append('<li>' + number + '</li>');
});