當所有子項都不顯示時如何隱藏上層div

Question

我有標題，有兄弟姐妹，其中一個是div clearfix，在這個div有ul的box-content，有些項目被隱藏，其中一些被顯示，其中有一個ol列表單擊它，如果在此示例電池的項目列表中沒有任何項目，則它不應顯示標題標題（div類名稱為reltitles ），請記住，我們有很多標題標題，框內容和div，因此應該工作一般不是特定的

<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腳本代碼，無法使用chrome工具調試，但仍然無法弄清楚：

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

UPDATe：id是唯一的，它們將由php代碼生成，我只是想讓它更簡單

Answer 1

抱歉，我不確定您要在這里做什么。 在這里，我在這里http://jsfiddle.net/5VTYS/4/創建了一個jsfiddle，在其中進行了更改，以避免您在下面提到的代碼中出現語法錯誤

$（“＃myAnchor li a”）。click（function（）{

    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 list = clear.childNodes [1] .children（）; 應該是var list = clear.childNodes [1] .children;

2. j $（“＃myAnchor li a”）應該是這個-> $（“＃myAnchor li a”）

3. 在增加值之前定義j。

希望這可以幫助。

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