Question

我想通过在长子列表中隐藏一些元素而不在服务器端添加额外处理来缩短列表。问题是来自服务器的标记不是由我控制的，并不是为了让我的工作变得简单而设计的。这是代码

<ul id="long-list">
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="header"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="header"></li>
  <li class="item"></li>
  .
  .
  .
</ul>

正如您所注意到的那样，标题是这些项目的兄弟。现在，我希望有一个jQuery代码，在每个标题后只显示3个项目，并隐藏其余部分以使列表更短，更有用。

这是我的尝试不工作：

  $('#long-list li.header ~ li.item:gt(3)').hide();
  $('#long-list li.header ~ li.item:lt(3)').show();
  $('#long-list li.header').show();

额外的功能是在每个部分底部添加一个隐藏项目的节点，说明隐藏了多少项目，说“再多5个......”

Answer 1

可能做得更好，但这应该有效：

var i = 0;
$("#long-list li.header:first").nextAll("li").each(function(){
  i = $(this).hasClass("header") ? 0 : i+1;
  $(this).toggle(i<=3);
});

（更新为不在第一个标题之前隐藏项目。）

Answer 2

这就是我实现它的方式。请注意，它还有一些其他功能，例如在具有隐藏项目的子列表末尾添加节点，说明隐藏了x项目并绑定onclick事件以切换隐藏项目。

  if ($('#list li.header')[0]) {      
      var i = -1000;
      $("#list > li").each(function(){
        if ($(this).hasClass("header")) {
          (i>3) && ($(this).before( "<li  class='more'>" + (i-3) + " more...</li>").bind("click", toggle_more() )  );
          i = 0;
        } 
        else {
          i = i+1; 
        }
        $(this).toggle(i<=3);
      });
  }

它基本上基于svinto上面所说的内容。我仍然期待更好的表现。无论如何，现在我对结果感到满意。

使用-1000启动i可确保我们不会隐藏列表顶部没有任何标题的项目。一旦我们到达标题，我们将i设置为零并开始计数。

Answer 3

如果没有jquery中的循环，你就无法做到这一点。

Answer 4

这似乎对我有用，并且似乎逻辑上遵循原始尝试的意图仅使用兄弟选择器。

  $("li.header:first").prevAll("li.item").hide();
  $("li.header").each(function() {
    $(this).nextAll("li.item:lt(3)").show();
    $(this).nextAll("li.item:gt(3)").hide();
  });

在棘手的情况下使用jQuery隐藏列表中的额外项目（标记不理想）

4 个答案: