隐藏除父母以外的所有孩子

时间:2018-05-03 16:27:15

标签: javascript jquery

我想隐藏除{1}之外的每个.push_down的所有子元素(.parent),我尝试使用以下代码,但这不是正确的因为它不起作用的方式。如果有人知道正确的方法,请回答。

.push_down[0]
$(document).ready(function(){
  var len = $('.parent').length;
  for(let i = 0; i < len; i++) {
    var blocks = $('.parent').[i].$('.push_down');
    var block_len = $('.parent').[i].$('.push_down').length;
    for(let j = 1; j < block_len; j++) {
      $('.parent').[i].$('.push_down')[j].addClass('hidden');
    }
  }	
});

2 个答案:

答案 0 :(得分:1)

您可以尝试以下代码。我找到了每个.parent类,然后使用.push_down选择器查找:gt()类,这将选择高于给定值的所有元素,在本例中为0 。在下面的代码片段中找到工作解决方案:

&#13;
&#13;
$(document).ready(function() {
  $('.parent').find('.push_down:gt(0)').hide();
});
&#13;
.block {
  height: 200px;
  background: lavender;
  padding: 20px;
  text-align: center;
  font-size: 20px;
  color: #000;
}

.push_down {
  margin-bottom: 30px;
}

.hidden {
  display: none;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="col-md-offset-3 col-md-6 col-sm-8">
        <div class="parent">
          <div class="panel-primary">
            <div class="panel-heading push_down">
              <div class="block">
                BLOCK A
              </div>
            </div>
            <div class="panel-heading push_down">
              <div class="block">
                BLOCK B
              </div>
            </div>
            <div class="panel-heading push_down">
              <div class="block">
                Here
              </div>
            </div>
            <div class="panel-heading push_down">
              <div class="block">
                Where
              </div>
            </div>
            <div class="panel-heading push_down">
              <div class="block">
                Dark
              </div>
            </div>
            <div class="panel-heading push_down">
              <div class="block">
                BLOCK B
              </div>
            </div>
          </div>
        </div>
        <div class="parent">
          <div class="panel-primary">
            <div class="panel-heading push_down">
              <div class="block">
                BLOCK AA
              </div>
            </div>
            <div class="panel-heading push_down">
              <div class="block">
                BLOCK BB
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

试试这个

  $('.parent').find('.push_down:not(:first)').hide();

或试试这个

$('.parent').each(function(){
      $(this).find('.push_down:not(:first)').hide();
});