隱藏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>