jquery找到孩子而不是大孩子

Question

我想选择所有的子div并使用jQuery Selector忽略grand childs div，我以此为例：

＆＃13;

＆＃13;

$('.main').find('.this').show(); // shows the first only

＆＃13;

div.this{
  display:none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='main'>
      <div>
        ... a lot of more divs levels ...
        <div>
          <div class='this'>show this!!!!!!!!!!
            <div>
              <div>
                <div class='this'>do not show this
                  <div>
                  </div>
                </div>
              </div>
              <div>
                <div class='this'>do not show this
                  <div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class='this'>show this!!!!!!!!!!
            <div>
              <div>
                <div class='this'>do not show this
                  <div>
                  </div>
                </div>
              </div>
              <div>
                <div class='this'>do not show this
                  <div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

＆＃13;

＆＃13;

＆＃13;

我想选择＆＃34;这个＆＃34;找到了第一级的元素，但没有深入搜索，因此以下代码都不起作用：

$('.main').find('.this').show(); // shows them all
$('.main').find('.this').show(); // select both
$('.main').find('.this').eq(0).show(); // shows the first only
$('.main').find('.this').first().show(); // shows the first only
$('.main .this:nth-child(1)').show(); // shows the first only and his childs
$('.main').find('.this').siblings().show(); // doesn't show anything
$('.main > div > div > .this').show(); // we don't know how deep level is
$('.main').children('.this').show(); // we don't know how deep level is
$('.main').closest('.this').show(); // looks up through its ancestors only

测试所有答案

// Kevin B
$('.main').find('.this').first().siblings('.this').addBack().show() // it works, I don't know how!
// Alexander Solonik
$('.main').find('.this').eq(0).siblings('.this').addBack().show() // this one also works, why!?

可以限制我想要找到多少级别？

Answer 1

如果您尝试查找第一级别的元素（不是直接死亡），则可以使用find()，eq()，siblings()和addBack()获取第一级元素。

＆＃13;

＆＃13;

$('.main').find('.this').eq(0).siblings('.this').addBack().show()

＆＃13;

div.this {
  height: 20px;
  background: red;
  display:none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='main'>
  <div>
    ... a lot of more divs levels ...
    <div>
      <div class='this'>show this!!!!!!!!!!
        <div>
          <div>
            <div class='this'>do not show this
              <div>
              </div>
            </div>
          </div>
          <div>
            <div class='this'>do not show this
              <div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class='this'>show this!!!!!!!!!!
        <div>
          <div>
            <div class='this'>do not show this
              <div>
              </div>
            </div>
          </div>
          <div>
            <div class='this'>do not show this
              <div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

.find，.first，.siblings和.addBack将为您提供所需的结果。

$('.main').find('.this').first().siblings('.this').addBack().show()

它会找到第一个.this，找到拥有该类的兄弟姐妹，将之前的选择添加回集合，然后显示它们。

＆＃13;

＆＃13;

$('.main').find('.this').first().siblings('.this').addBack().show()

＆＃13;

div.this{
  display:none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='main'>
      <div>
        ... a lot of more divs levels ...
        <div>
          <div class='this'>show this!!!!!!!!!!
            <div>
              <div>
                <div class='this'>do not show this
                  <div>
                  </div>
                </div>
              </div>
              <div>
                <div class='this'>do not show this
                  <div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class='this'>show this!!!!!!!!!!
            <div>
              <div>
                <div class='this'>do not show this
                  <div>
                  </div>
                </div>
              </div>
              <div>
                <div class='this'>do not show this
                  <div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

＆＃13;

＆＃13;

＆＃13;