jquery - 隐藏一定范围的子项 jQuery

Question

我正在为一堆页面构建一个通用标题，并传入变量来设置标题文本等。我​​有一个面包屑菜单，我只想显示页面的适当数量的步骤。这是我的菜单 html:

<ol id="meter" class="">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
</ol>

然后我有一个如下所示的函数:

function levels() {
$("#meter").addClass(stepNumber);
}

在第一页上，我将类设置为“一”，在第二页上设置为“二”，依此类推。

如果类是“one”，我只想显示第一项。如果是“两个”，我只想显示第一个和第二个，依此类推。

我知道我可以用 css 做一些事情，为每个类编写一个样式，但这似乎有点愚蠢。我该如何使用 jQuery 来做到这一点？

Answer 1

尝试将 className 设置为 1、2 -> 100 ，并利用 :gt() Selector选择器

function levels(stepNumber) {
  $("#meter").addClass(stepNumber)
    .find("li:gt(" + (stepNumber - 1) + ")")
    .hide();
}

levels(2);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<ol id="meter" class="">
  <li>Page 1</li>
  <li>Page 2</li>
  <li>Page 3</li>
  <li>Page 4</li>
</ol>

或者，要保持将 className 添加为 one、two -> onehundred，可以创建一个对象来表示每个类显示的项目数

var keys = {
  1: "one",
  2: "two",
  3: "three",
  4: "four"
};

function levels(stepNumber) {
  $("#meter").addClass(keys[stepNumber])
    .find("li:gt(" + (stepNumber - 1) + ")")
    .hide();
}

levels(2);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<ol id="meter" class="">
  <li>Page 1</li>
  <li>Page 2</li>
  <li>Page 3</li>
  <li>Page 4</li>
</ol>