jquery - Jquery限制列表元素，隐藏第一个孩子之后

Question

我想要实现的是显示十个列表项，如果单击下一个列表元素以隐藏第一个元素，那么列表将始终包含十个元素

HTML

<div id="showMY">
   <ul>
   </ul>​
</div>

jQuery

    $("#dropList").on("change", function () {

        var dropValue = $("#dropList").val();

        $.get("getValues.php", 
        { 
            a: dropValue
        },
        function(data)
        {
            $("#showMY").append(data);


        });

    });

返回的值为

<li><a href="#">Value</a></li>

提前致谢 ;）

Answer 1

这应该可以解决问题：

HTML：

<select id="dropList">
    <option value="item1">item1</option>
    <option value="item2">item2</option>
    <option value="item3">item3</option>
    <option value="item4">item4</option>
    <!-- etc -->
</select>

<ul id="showMY">
</ul>

JS：

$(function() {
    $("#dropList").change(function() {
        var value = $("#dropList").val();
        $.get("getValues.php", {a: value}, function(data) {
            $("#showMY").append('<li><a href="#">' + data + '</a></li>');
            if($("#showMY li").length > 10) {
                $("#showMY li:first:visible").hide();
            }
        });
    });
});

Answer 2

您可以使用以下代码实现此目的

HTML：

<select id="drop">
    <option val="item 11"></option>
        <option val="item 12">item 12</option>
        <option val="item 13"> item 13</option>
        <option val="item 14">item 14</option>
        <option val="item 15">item 15</option>
        <option val="item 16">item 16</option>
        <option val="item 17">item 17</option>
        <option val="item 18">item 18</option>
        <option val="item 19">item 19</option>
        <option val="item 20">item 20</option>

</select>

<ul id="container">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
</ul>

jQuery：

$('#drop').on('change',function(){
   var dropVal = $(this).val();
   $('ul#container li:visible').first().hide();
    $('ul#container').append("<li> "+ (dropVal) +" "); 
});

$.get您可以通过在代码中添加调用来修改它以满足您的需要。

工作小提琴