如何隐藏所有的孩子显示没有

Question

我有标题，他们有兄弟姐妹之一，这是一个div clearfix，在这div有一个ul箱内容，有一些项目，其中一些被隐藏，其中一些被显示有一个ol列表应该被点击它，如果在这个例子中的项目列表中没有项目电池它不应该显示标题标题（div类名称是reltitles）请记住，我们有很多的标题头和框的内容和申报单，所以应该在一般的工作，不是一个具体的一个

<div class="reltitles" id="Batteries" style="display:block;"> 
    <font class="resultHeader">(2) Batteries </font> 
</div> 
<div class="clearfix" value="Batteries" name="Batteries" id="Batteries"> 
    <ul class="box-content" id="Batteries"> 
     <li id="50-80" class="item first" style="display: none;"></li> 
     <li id="50-80" class="item first" style="display: none;"></li> 
     <li id="20-50" class="item"> 
      something here 
     </li> 
    </ul> 
</div> 

名单被点击：

<ol id="myAnchor"> 
    <li><a id="0-20" href="#">0.00 - 20.00</a></li> 
    <li><a id="20-50" href="#">20.00 - 50.00</a></li> 
    <li><a id="50-80" href="#">50.00 - 80.00</a></li> 
    <li><a id="80-100" href="#">80.00 - 100.00</a></li> 
    <li><a id="All" href="#">All</a></li> 
</ol> 

这是我的Java脚本代码不工作我调试铬工具和我还是无法弄明白：

j$("#myAnchor li a").click(function(){ 
    var prices = j$(".box-content li"); 
    prices.show(); 
    if (this.id != "All") 
    { prices.not(j$(".box-content li[id='"+this.id+"']")).hide(); 
    } 
    var tt=document.getElementsByClassName("reltitles"); 
    for(k=0;k<tt.length;k++) 
    { 
     var clear=tt[k].nextElementSibling; 
     var list=clear.childNodes[1].children; 
     j=0; 
     for(i=0;i<list.length;i++) 
      { 

      if(list[i].style.display=="none") 
      { 
       j++; 
      } 
      if(j==list.length) 
       { 
       tt[k].style.display="none"; 
       } 
      else{ tt[k].style.display="block";} 
      } 
    } 
    }); 

更新：ID是唯一的，他们将产生通过php代码我只是想表明它更简单

Answer 1

对不起，我不完全确定你在这里准备做什么。 在这里，我在这里创造一个的jsfiddle http://jsfiddle.net/5VTYS/4/中，我所做的更改，以避免您在下面

$提到你的代码有语法错误（“＃myAnchor李一”）。点击（函数（）{

var tt=document.getElementsByClassName("reltitles"); 
    var j = 0; 
     for(k=0;k<tt.length;k++) 
     { 
      var clear=tt[k].nextElementSibling; 
      var list=clear.childNodes[1].children; 
      for(i=0;i<list.length;i++) 
       { 
       if(list[i].style.display=="none") 
       { 
        j++; 
       } 
       if(j==list.length) 
        { 
        tt[k].style.display="none"; 
        } 
       } 
     } 

}）;

如果我理解错误，请编辑代码。

但是，也有在你的代码中的一些语法错误：

1. VAR列表= clear.childNodes [1]。儿童（）;应该是var list = clear.childNodes [1] .children;

2. Ĵ$（ “＃myAnchor李一”）应该是这样的 - > $（ “＃myAnchor李一”）

3. 的值递增之前定义学家

希望这会有所帮助。

Answer 2

“这里是基于你的标题题目为例：

HTML：

<div class="reltitles" id="Batteries" style="display:block;"> 
    <font class="resultHeader">(2) Batteries </font> 
</div> 
<div class="clearfix" value="Batteries" name="Batteries" id="BatteriesList"> 
    <ul class="box-content" id="Batteries"> 
     <li id="50-80" class="item first" style="display: none;">batterie 1</li> 
     <li id="50-80" class="item first" >Batterie 2</li> 

     </ul> 
    </div> 
<ol id="myAnchor"> 
    <li><a id="0-20" href="#">0.00 - 20.00</a></li> 
    <li><a id="20-50" href="#">20.00 - 50.00</a></li> 
    <li><a id="50-80" href="#">50.00 - 80.00</a></li> 
    <li><a id="80-100" href="#">80.00 - 100.00</a></li> 
    <li><a id="All" href="#">All</a></li> 
</ol> 

JS：

$("#myAnchor li a").click(function(){ 
    var visible = false; 
    $('#BatteriesList').find('li').each(function(value) { 
     visible |= $(this).is(":visible"); 
    }); 
    if (!visible) { 
     $('#Batteries').hide(); 
    } 
});