Jquery限制列表元素，隐藏后的第一个子元素

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

HTML

返回的值是

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

---

提前感谢

这应该可以做到：

HTML:

JS:

---

您可以使用以下代码实现这一点

HTML:

jQuery：

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

---

为了澄清，当有人点击任何元素时，第一个元素被隐藏，下一个隐藏的元素被显示？哼。。。我不明白。有10个元素，单击其中一个，它会隐藏第一个元素：有9个元素。在何处/何时添加新元素？…将显示十个列表项，如果下一个列表元素。。。因此，您正在显示11个元素？我有一个下拉选择视图，我忘了提到它，每次单击一个值时，它将附加到ul，在显示10个列表元素后，列表上升，第一个子元素被删除，单击的元素将显示在下面。希望我很清楚你想要像这样的东西吗我的李：首先，隐藏；此行将尝试将已隐藏的第一个元素反复隐藏。这应该是$showMY li:first:visible.hide；

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

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

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


        });

    });

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

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

$(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();
            }
        });
    });
});

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

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