如何隱藏所有的孩子顯示沒有

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(); 
    } 
});