javascript - 如何使用 jQuery 显示下一个 ul li 元素

Question

我处理元素的动态创建。

所以我有一个 16 个值的列表，它是从数组生成的。然后，我根据上面的数组构建一个ul元素（选项卡）列表。
现在我需要在我的 HTML 页面中一次只显示 10 个选项卡。

下面的函数创建一个ul元素（tab）并附加到#left-tabs div 中。这在以数组值作为输入的循环内调用：

function createTab(index){
  var result = index + 1;
  var tabs = ` <ul>
                 <li value="${result}">${result}</li>
               </ul>`
  $("#left-tabs").append(tabs)
}

下面的脚本一次创建 16 个选项卡而不是 10 个。

var elements = $("#left-tabs");
var showNext = function (index2) {
        if (index2 >= elements.length) {
            index2 = 0;
            location.reload();
        }
        elements.hide().slice(index2, index2 + 10).show();
        setTimeout(function () {
            showNext(index2 + 10);    
        }, 3000);
    }
    showNext(0);

HTML：

<div id="left-tabs">
</div>

但由于某种原因，它不起作用。

编辑：
行var elements = $("#left-tabs");指向父 div 而不是选项卡列表。如下修改此行以使其按预期工作。

var elements = $("#left-tabs ul");

标签： javascriptjquery

Answer 1

Linevar elements = $("#left-tabs")指向父 Div 而不是内部ul元素（选项卡）。因此，首先您应该获取左侧选项卡中所有ul元素的列表，然后遍历它们。 修改上面的行如下：

var elements = $("#left-tabs ul");