隐藏一定范围childrenjQuery

Question

我正在为一堆页面构建一个公共 header 并传入变量以设置标题文本等。我有一个面包屑菜单，我只想显示适当的步骤数这页纸。这是我的菜单 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);
}

在第一页上，我将 class 设置为 "one"，在第二页上设置为 "two"，等等

如果 class 是 "one"，我只想显示第一项。如果是"two"，我只想显示第一个和第二个，等等

我知道我可以用 css 做一些事情，我为每个 class 写一个样式，但这看起来有点傻。我该如何使用 jQuery 来代替？

Answer 1

为什么不使用 for 循环加上一些 jQuery 来将相关数量的元素设置为显示状态？例如：

var count = // number from class
var listElements = $('#meter').children()
for (i = 0; i < count; i++) {
    $(listElements[i]).addClass('active');
}

在这里，'active' class 会附加一个显示器属性。这对你有意义吗？

请注意，您需要编辑子 class 名称，以便它们可以用作 for 循环中的索引。

Answer 2

尝试将 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，可以创建一个对象来表示每个 [= 显示的项目数22=]

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>

Answer 3

您可以为每个页面添加相关的类。例如："page_1"、"page_2"...

<ol id="meter" class="">
<li class="page_1">Page 1</li>
<li class="page_2">Page 2</li>
<li class="page_3">Page 3</li>
<li class="page_4">Page 4</li>
</ol>

添加这个 css:

#meter li{display:none;}

脚本将是：

function currentPage(pageNum){ 
        $("#meter li").each(function(){
            if(parseInt($(this).attr("class").split("_")[1]) <= pageNum){
                $(this).show();
            }else{
                $(this).hide();
            }
        })
    }

你会像这样触发它：

currentPage(3);

这是 jsfiddle 示例：https://jsfiddle.net/216tw9u7/

隐藏一定范围childrenjQuery

Hide a certain range of children jQuery

jquery

children

range

hide