Question

我想要隐藏ul的所有孩子，只有div具有特定的孩子类。我希望在点击包含课程h4的锚标记时隐藏除li之外的所有li个元素，其中包含div类header4。我的观点有一个ul，内部有foreach li循环。

<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

试试这个

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

或

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

Answer 2

你的主要错误是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 3

首先，您的代码中存在许多语法问题。您可以在children和li所有ul但hide中找到所有div header4，如下所示，

$(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 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>

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

4 个答案: