如何檢查父母是否隱藏子元素？

Question

我有下面的代碼，控制單選按鈕選項顯示一個級別的時間。它從0級開始，在用戶選擇一個選項後，它確定哪些選項在下一級顯示，並只顯示這些選項。

我的問題是，對於某些選定的選項，下一級可能沒有可用的選項。因此，我想跳過這個級別，然後檢查下一個等等。我可以檢查是否隱藏了隱藏元素，但隱藏了父級隱藏，導致隱藏了所有子元素。

有其他方法可以檢查嗎？

在我的代碼，你可以看到這行：

$('*[id^="op' + $(this).val() + '"]').show(); 

這行設置一個隱藏的父可見（順便說一句，我知道他們會不會顯示，直到顯示的父。）下的選項之後然後檢查下一級是否有可用選項（即未隱藏）（這種情況仍然隱藏）。

我不想顯示級別div，直到我知道有可用的選項。

下面是示例HTML：

<div class="level" id="level0"> 
        <div class="option" id="op0-1"> 
<input id="0-1" name="optionids[1]" type="radio" value="1" />option</div> 
        <div class="option" id="op0-2"> 
<input id="0-2" name="optionids[1]" type="radio" value="2" />option</div> 
</div> 

<div class="level" id="level1"> 
        <div class="option" id="op1-3"> 
<input id="1-3" name="optionids[1]" type="radio" value="3" />option</div> 
        <div class="option" id="op1-4"> 
<input id="1-4" name="optionids[1]" type="radio" value="4" />option</div> 
        <div class="option" id="op1-5"> 
<input id="1-5" name="optionids[1]" type="radio" value="5" />option</div> 
        <div class="option" id="op2-6"> 
<input id="2-6" name="optionids[1]" type="radio" value="6" />option</div> 
        <div class="option" id="op2-7"> 
<input id="2-7" name="optionids[1]" type="radio" value="7" />option</div> 
</div> 

<div class="level" id="level2"> 
        <div class="option" id="op3-8"> 
<input id="3-8" name="optionids[1]" type="radio" value="8" />option</div> 
        <div class="option" id="op3-9"> 
<input id="3-9" name="optionids[1]" type="radio" value="9" />option</div> 
        <div class="option" id="op4-10"> 
<input id="4-10" name="optionids[1]" type="radio" value="10" />option</div> 
        <div class="option" id="op4-11"> 
<input id="4-11" name="optionids[1]" type="radio" value="11" />option</div> 
        <div class="option" id="op4-12"> 
<input id="4-12" name="optionids[1]" type="radio" value="12" />option</div> 
</div>     

我只顯示了三個級別，但應該足夠了。在這種情況下，level0中的所有選項在level1中都有選項，但只有選項（op1-3，op1-4）在level2中具有選項。

順便說一句，這些ID由選項值和選項父項組成。即選項op1-3是來自選項op0-1和op1-3的實際值的值。

這是控制選項查看的Jquery。

$(function() { 

    $(":submit, :reset").button({ disabled: true }); 
    $(".option").not($('*[id^="op0-"]')).hide(); //hide all options but those on level 1 (index 0) 
    $(".level").not("#level0").hide(); //hides all levels but level 1 

    //When user selects an option on visible level show next level and options for selected option 
    $("input").click(function() { 

     //enable reset button once user starts selection 
     if ($("#option:checked")) { 
      $("#reset").button({ disabled: false }); 
     } 

     //create variable for easy access to elements 
     var parentContainer = $(this).parent(); 
     var currentLevel = $(this).parent().parent(); 
     var nextLevel = $(currentLevel).next(); 

     //disable other options in current level after selection. This will only show selected options at each level 
     $(parentContainer).siblings('*[id^="op"]').hide(); 

     //Set visibility of options related to selected option to on. 
     $('*[id^="op' + $(this).val() + '"]').show(); //shows options 

     //check if there are options visible for next level. If not move to next level and check. i.e skip any levels which don't have options. 
     while (CheckForOptions(nextLevel) == false) { 
      nextLevel = nextLevel.next(); 
     } 

     alert("Level after check completed: " + nextLevel.attr("Id") + " This one should become visible"); 
     //shows the level that now has options for selected option 
     $(nextLevel).show(); 

     //if we are at last level, enable submit button. 
     if ($(currentLevel).attr("id") == $("#lastlevel").val()) { 
      $(":submit").button({ disabled: false }); 
     } 

    }); 

    function CheckForOptions(nextLevel) { 

     alert("Level coming in: " + nextLevel.attr("Id")); 

     if ($(nextLevel).children().not(":hidden").size() > 0) { 
      alert("Has some not hidden"); 
      alert("Number of elements not hidden: " + $(nextLevel).children().not(":hidden").size()); 
      return true; 
     } 
     else { 
      alert("all are hidden"); 
      alert("Number of hidden: " + $(nextLevel).children().filter(":hidden").size()); 
      return false; 
     } 
    }; 

Answer 1

好了，雖然其中一種方法來識別屬於特定父的子元素已經在衆目睽睽下，它並沒有使用最好的方法。以下是我所實施的。

function CheckForOptions(nextLevel, val) { 

     var result = false; 

     $(nextLevel).children().each(function() { 
      //check if we find options which are visible in next level. 
      if ($(this).css("display") === "block") { 
       result = true; //some visible 
      } 
     }); 

     return result; 

    }; 

我以前將我的所有選項都設置爲顯示等於「block」。這是爲了確保何時應用Jquery .show（）方法，它將返回到「block」。然後我在檢查這個關卡的任何一個孩子是否有「block」的實際值。如果發現某些情況，我會顯示該級別，否則我將轉移到下一級別。現在

，關於我的問題：

如何我可以檢查是否爲非隱藏的子元素，而父母是什麼？

即使由於隱藏父元素而使元素不可見，您也可以檢查CSS「display」屬性的實際值。