Question

如果我有以下嵌套列表

<ul>
  <li class="hide">list 1.1</li>
  <li>list 1.2</li>
  <li>list 1.3
    <ul>
      <li>list 2.1</li>
      <li class="hide">list 2.2</li>
      <li>list 2.3
        <ul>
          <li id="list-item">list 3.1</li>
          <li class="hide">list 3.2</li>
        </ul>
      </li>
      <li class="hide">list 2.4</li>
      <li class="hide">list 2.5</li>
    </ul>
  </li>
  <li class="hide">list 1.4</li>
</ul>

如何使用jquery显示项目3.2,2.4,2.5和1.4而不显示其他隐藏项目。（在显示的树中，这些项目彼此相邻，即使它们来自不同的列表。）

我尝试了以下但没有成功 - 它只隐藏下一个li。

$("li").find("#list-item").nextUntil(":not(.hide)").removeClass("hide");

如何让它从所有li元素中选择，而不仅仅是当前ul中的那些？

编辑添加：以下是JS Bin的示例： http://jsbin.com/usoyul/2/edit

Answer 1

我开发了一个冗长的解决方案。如果有人有更好的解决方案，那么我希望看到它。

var found = false;
$.each($("li"), function(i, li){
  var $li = $(li);

  if($li.attr("id") === "list-item"){
    found = true;
    return true;    // Continue the .each
  }

  if(!found)
    return true;    // Continue the .each

  if(!$li.hasClass('hide'))
    return false;   // Exit the $.each


  $li.removeClass('hide');
  return true;          // Continue the .each
});

http://jsbin.com/usoyul/4/edit

如何使用jQuery更改多个嵌套列表中的并发列表项

1 个答案: