一个js显示隐藏元素的问题

Question

<div>
    <ul class="list">
        <li></li>
        <li></li>
        <li class="show"></li>
        <li></li>
        <li></li>
    </ul>
    <ul class="list">
        <li class="show"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ul class="list">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li class="show"></li>
    </ul>
 </div>

 <script>
     var ul = document.querySelectorAll('ul.list');
     ul.forEach(function (value, index, array) {
            var li = value.querySelectorAll('li');
            console.log(li.length);
            for (var i = 0; i < li.length; i++) {
              if (i > 2 ) {
                li[i].style.display = 'none';
              }
            }                
          })
          
          dcoument.getElementsByClassName("show").click(function () {
              // show li
          });
 </script>

默认每个ul显示若干个li，点击show的时候全部显示
问题就是点击show的时候会影响到其它ul中的li的显示。
不能通过id去单个处理，因为内容比较多，都是从数据库里读出来的，会变。
是不是应该把 show 的 click 放到循环里面去监听？

补充： show 不一定是第一个元素……是变动的。是第一个或者最后一个都有可能……

谢谢大家抽时间来回答，目前觉得最好的方法还是找父元素再把全部子元素show()

$(".show").click(function () {
            $(this).parent().children().show();
            $(this).hide();
          });

Answer 1

$(".show").on("click",function(){

 $(this).parent("list").find("li").show();

})

Answer 2

遇到过类似的问题 大致的原因是这样：

拿数组说，你用一个数组存储了所有的li对象。在Jquery操作中，可以用$("ui:eq(1)").("li")的形式去决定显示隐藏的是哪个一个ul下的li，而你的script中并没有进行这个判断，只做了判断当li位置为2时就进行隐藏，所以会操作到所有，你要做的是还要判断操作了哪个ul，加一个监听ul的就OK，然后对当前变动的ul再去操作这层的li

Answer 3

每一个ul的第一个li元素。

Answer 4

是否可以监听点击事件的target元素，然后把这个元素的兄弟元素全部隐藏掉？这个应该不会影响到其他ul

Answer 5

当你点击.shou的li的时候，找到li.show的父元素ul，然后ul.style.display ='none'

Answer 6

肯定呀，点击的时候

    var oLi = dcoument.getElementsByClassName("show");
            for(let i=0;i<oLi.length;i++){
                oLi.onclick=function(){
                    var oUl = this.parentNode;
                    var lishow = oUl.getElementsByTagName("li");
                    for(let j=0;j<lishow.length;j++){
                        lishow[j].style.display = "block";
                    }
                }
            }

Answer 7

//show li
[].forEach.call(this.parentElement.children,function(elem){elem.style.display=''})

Answer 8

  Array.prototype.map.call(document.querySelectorAll(".show"),function (ele) {
    var show = true
    ele.addEventListener('click',function(e){
      if (e.target.parentNode.nodeName == 'UL') {
        var li = e.target.parentNode.querySelectorAll('li')
        Array.prototype.map.call(li, function (v, i) {
          if (i > 0 && show) {
            v.style.display = 'none'
          } else {
            v.style.display = 'block'
          }
        })
        show = !show
      }
    })
  })

Answer 9

<div>
    <div id="uls">
        <ul class="list">
            <li class="show">aaa</li>
            <li>a</li>
            <li>a</li>
            <li>a</li>
            <li>a</li>
        </ul>
        <ul class="list">
            <li class="show">bbb</li>
            <li>b</li>
            <li>b</li>
            <li>b</li>
            <li>b</li>
        </ul>
        <ul class="list">
            <li class="show">ccc</li>
            <li>c</li>
            <li>c</li>
            <li>c</li>
            <li>c</li>
        </ul>
    </div>
</div>
<script type="text/javascript">
    var lis = document.querySelectorAll("#uls ul li");
    lis.forEach(function (li) {
        var itClass = li.getAttribute("class");
        if(!itClass ||  itClass !== 'show') {
            li.style.visibility="hidden";
        }
    })
    document.getElementById("uls").onclick = function (event) {
        var target = event.target;
        var itClass = target.getAttribute("class");
        if(itClass && itClass === 'show') {
            target.parentNode.childNodes.forEach(function (li) {
                if(li && li.tagName && li.tagName.toLowerCase() === 'li') {
                    li.style.visibility = "visible";
                }
            });
        }
    }
</script>