隐藏ul的所有孩子，除了一个具有特定类jquery的div

Question

我想隐藏ul的所有孩子，除了一个具有div的特定 类。我想带班h4隐藏一个锚标记一下，除了包含div与header4类中的任何li所有li元素时。我的观点有一个foreach环路li内ul。

<ul id="itemContainer" class="posts"> 
    @foreach (var item in Model) { 
    <li class="first"> 
     <div class="date"> 
     </div> 
     if (condition) { 
     <div class="gallery-container arrow header1"> 
     </div> 
     } if (condition) { 
     <div class="gallery-container arrow header2"> 
     </div> 
     } if (condition) { 
     <div class="gallery-container arrow header3"> 
     </div> 
     } if (condition) { 
     <div class="gallery-container arrow header4"> 
     </div> 
     } 
    </li> 
    } 
</ul> 
<li><a href="javascript:void(0);" class="h4">click</a></li> 
<script> 
    $(document).ready(function() { 
     $('.h4').click(function() { 

      alert("1"); 
      $("#itemContainer").children().hide(); 
      $('.header4').show(); 
     }) 
    }); 
</script> 

Answer 1

您的主要错误是在children()方法中输入错误。我也建议使用jQuery .not()，而不是隐藏所有和“展示header4” - 使用这种方法，你会避免闪烁

$(document).ready(function() { 
 
    $('.h4').click(function() { 
 

 
    alert("1"); 
 
    $("#itemContainer").children().not('.header4').hide(); 
 

 
    }); 
 
});

*{ 
 
    margin: 0; padding: 0; 
 
    } 
 

 
li { 
 
    display: block; 
 
    border: 1px solid red; 
 
} 
 

 
a{ 
 
    display: inline-block; 
 
    border-radius: 5px; 
 
    background: #AAA; 
 
    color: white; 
 
    text-decoration: none; 
 
    margin: 5px 0; 
 
    padding: 5px; 
 
    text-transform: uppercase; 
 
    font-family: Verdana; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="itemContainer"> 
 
    <li class="header1">1</li> 
 
    <li class="header2">2</li> 
 
    <li class="header3">3</li> 
 
    <li class="header4">4</li> 
 
    
 
</ul> 
 
<a href="javascript:void(0);" class="h4">click</a>

Answer 2

首先，你必须在你代码中的许多语法问题。 您可以找到ul和hide所有div但header4内的所有childrenli S作为如下，

$(document).ready(function() { 
 
    $('.h4').click(function() { 
 

 

 
    $("#itemContainer").children().each(function() { 
 
     $(this).find('div:not(.header4)').hide(); 
 
    }); 
 

 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="itemContainer" class="posts"> 
 
    <li class="first"> 
 
    <div class="date"> 
 
    </div> 
 
    <div class="gallery-container arrow header1">header1 
 
    </div> 
 
    <div class="gallery-container arrow header2">header2 
 
    </div> 
 
    <div class="gallery-container arrow header3">header3 
 
    </div> 
 
    <div class="gallery-container arrow header4">header4 
 
    </div> 
 
    </li> 
 
    <li class="second"> 
 
    <div class="date"> 
 
    </div> 
 
    <div class="gallery-container arrow header1">header1 
 
    </div> 
 
    <div class="gallery-container arrow header2">header2 
 
    </div> 
 
    <div class="gallery-container arrow header3">header3 
 
    </div> 
 
    <div class="gallery-container arrow header4">header4 
 
    </div> 
 
    </li> 
 
</ul> 
 
<li><a href="javascript:void(0);" class="h4">click</a> 
 
</li>

Answer 3

试试这个

$('#itemContainer').children(':not(.header4)').hide(); 

或

$('#itemContainer .header4').siblings().hide(); 

Answer 4

您可以通过正确拼写的孩子使用jQuery像下面

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="itemContainer" class="posts"> 
 
    <li class="first"> 
 
     <div class="date"> 
 
     </div> 
 
     <div class="gallery-container arrow header1">header1 
 
     </div> 
 
     <div class="gallery-container arrow header2">header2 
 
     </div> 
 
     <div class="gallery-container arrow header3">header3 
 
     </div> 
 
     <div class="gallery-container arrow header4">header4 
 
     </div> 
 
    </li> 
 
</ul> 
 
<a href="javascript:void(0);" class="h4">click</a> 
 
<script> 
 
    $(document).ready(function() { 
 
     $('.h4').click(function() { 
 
      $("#itemContainer li .arrow").hide(); 
 
      $("#itemContainer li .arrow.header4").show(); 
 
     }); 
 
    }); 
 
</script>