如果在选择选项后隐藏子元素，如何隐藏父 div答案

【问题标题】：how to hide parent div if child is hidden after select option如果在选择选项后隐藏子元素，如何隐藏父 div
【发布时间】：2017-11-30 13:34:54
【问题描述】：

如果在触摸选择选项后其子 div class="number" 已隐藏，我将隐藏父 div class="letter"。我尝试使用此处显示的最后几行脚本来执行此操作。为了更好地了解我需要什么，打开 sn-pp 预览 html 文件，然后在第一个选择中选择所有字母，在第二个选择中选择数字 5。因为数字 5 没有插入任何 Letter Div 中，所以所有 Div Letter 都应该被隐藏，但它们仍然显示并为空。

// function to manage select Letter    
$(document).ready(function(){
    $("#selectLetter").change(function(){
        $(this).find("option:selected").each(function(){
            var optionValueLetter = $(this).attr("value");
            if(optionValueLetter){
                 $(".letter").not("." + optionValueLetter).hide();
                $("." + optionValueLetter).show();
            } else{
                $(".letter").hide();
            }
        });
     }).change();
    
    
    
// function to manage select Number  
    $("#selectNumber").change(function(){
        $(this).find("option:selected").each(function(){
            var optionValueNumber = $(this).attr("value");
                if(optionValueNumber){
                    $(".number").not("." + optionValueNumber).hide();
                    $("." + optionValueNumber).show();
                } else{
                    $(".number").hide();
                }
            });
        }).change(); 
     
showAll(); // function to show all div   
        
}); // close $(document).ready(function()   
        
        
// show all div
function showAll(){   
    $(".letter , .number").show();
    }
    
// function to hide parentdiv letter if child div number is diplay="none"   
var children = $(".letter").children($('.number'));
       
    if($(children).css('display') === 'none'){
        $(".letter").hide();
    }else{
        $(".letter").show();
        }

.letter{   
border-left:solid 10px;
border-bottom:solid 4px;
color:white;
border-color:#636c72;
background: #636c72;;
margin-left:10px;
margin-right:10px;
width:60%;
}  
    
.number{   
border-left:solid 10px;
border-bottom:solid 4px;
color:white;
border-color:lightblue;
background: rgba(44,159,215, 1);;
margin-left:0px;
width:90%;
} 
    
select{
margin-left:10px;    
width: 30%;
border-left: solid 3px;
border-bottom: 0px;
border-right: solid 0px;
border-color: #cbcbcb;
height: 3em;
color: white!important;
background-color: rgba(44,159,215, 1)!important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
    
<title>Test</title>
   
</head>

<body>
    

<select  id="selectLetter" > 
    <option value="letter">All Letter</option>
    <option value="a">Letter A</option> 
    <option value="b">Letter B</option>
    <option value="c">Letter C</option>
    <option value="d">Letter D</option>
</select>
               
      
<select  id="selectNumber"> 
    <option value="number"> All Number</option>
    <option value="1">Number 1</option>   
    <option value="2">Number 2</option>    
    <option value="3">Number 3</option>
    <option value="4">Number 4</option>
    <option value="5">Number 5</option> 
</select>
    
<div class="letter a" >
    <div class="title"><p> div LETTER A </p></div>
    <div class="number 1">  <p> Number 1</p> </div>
    <div class="number 1">  <p> Number 1</p> </div>
    <div class="number 2">  <p> Number 2</p> </div>
    <div class="number 3">  <p> Number 3</p> </div>
    <div class="number 4">  <p> Number 4</p> </div>
</div>
    
<div class="letter b" >
    <div class="title"><p> div LETTER B</p></div>
    <div class="number 1">  <p> Number 1</p> </div>
    <div class="number 1">  <p> Number 1</p> </div>
    <div class="number 2">  <p> Number 2</p> </div>
    <div class="number 3">  <p> Number 3</p> </div>
    <div class="number 4">  <p> Number 4</p> </div>
</div>
    
<div class="letter c" >
    <div class="title"><p> div LETTER C</p></div>
    <div class="number 1">  <p> Number 1</p> </div>
    <div class="number 2">  <p> Number 2</p> </div>
    <div class="number 3">  <p> Number 3</p> </div>
    <div class="number 4">  <p> Number 4</p> </div>
</div>
    
<div class="letter d" >
    <div class="title">  <p>div LETTER D</p> </div>
    </div>
    
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    

    
    
</body>

</html>

【问题讨论】：

var children = $(".letter").children($('.number'));应该是 var children = $(".letter").children('.number');
如果子 div 编号为 diplay="none"**** 注释的 **** 函数之后隐藏 parentdiv 字母的整个代码块将仅在页面加载后执行一次。更改代码的逻辑并稍微清理一下。
@hgeorge 你的 div 字母 D 故意为空？预期的行为是什么？如果用户选择number 1，div D 会发生什么？
@Sudarpo Chong Yes Div D 是故意为空的，由于我需要的逻辑，根本不应该显示它
@hgeorge，在这种情况下，我的小提琴符合你的要求:)

标签： javascript jquery html

【解决方案1】：

https://jsfiddle.net/sudarpochong/ap3z3r7s/

我简化了你的代码。

`Select/dropdown` 事件处理程序

$("#selectLetter").on("change", selectChangeEventHandler);
$("#selectNumber").on("change", selectChangeEventHandler);

函数`selectChangeEventHandler`

function selectChangeEventHandler(e) {
    var selectedLetter = "." + $("#selectLetter").val();
    var selectedNumber = "." + $("#selectNumber").val();
    filterLetterNumber(selectedLetter, selectedNumber);
    hideLetterDivIfAllNumberDivHidden(selectedLetter);
}

函数`filterLetterNumber`

function filterLetterNumber(letter, number) {
    // console.log("filterLetterNumber", letter, number);
    $(".letter").hide();
    $(".number").hide();
    $(letter).show();
    $(number).show();
}

函数`hideLetterDivIfAllNumberDivHidden`

如果它的子 div 会隐藏父 div class="letter" class="number" 在触摸选择选项后被隐藏

function hideLetterDivIfAllNumberDivHidden(selectedLetter) {

    // console.log("hideLetterDivIfAllNumberDivHidden", selectedLetter);

    if (!selectedLetter || selectedLetter === "") {
    console.log("", selectedLetter);
    selectedLetter = ".letter";
  }

    $(selectedLetter).each(function (index, el) {
    console.log("hideLetterDivIfAllNumberDivHidden", index, el);
    $(this).show();

    //var countHidden = $(el).children(".number:hidden").length;
    var countVisible = $(el).children(".number:visible").length;
    //console.log("countVisible", countVisible, "countHidden", countHidden);

    if (countVisible == 0) {
        $(this).hide();
    }

  });

}

【讨论】：

Select/dropdown 事件处理程序

函数selectChangeEventHandler

函数filterLetterNumber

函数hideLetterDivIfAllNumberDivHidden

`Select/dropdown` 事件处理程序

函数`selectChangeEventHandler`

函数`filterLetterNumber`

函数`hideLetterDivIfAllNumberDivHidden`