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

How to alter concurrent list items from multiple nested lists with jQuery

本文关键字：列表 并发 嵌套 jQuery 何使用      更新时间：2023-09-26

如果我有以下嵌套列表

<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

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

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

相关文章：