CODEWITHSUNDEEP
javascriptjquery
stramin
stramin

Reputation: 2390

jquery find childs and not grand childs

I want to select all the childs div and ignore grand childs divs using a jQuery Selector, I have this as example:

$('.main').find('.this').show(); // shows the first only
div.this{
  display:none;
}
<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>

I want to select "this" elements on the first level found, but don't search deeper, so none of the following codes work:

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

Testing all the answers

// 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!?

It is possible to limit how many levels I want to find?

Upvotes: 1

Views: 73

Answers (2)

Alexander Solonik
Alexander Solonik

Reputation: 10230

If you're trying to find the first level of elements though, which are not direct decedents, you can use a combination of find(), eq(), siblings(), and addBack() to get the first level of elements.

$('.main').find('.this').eq(0).siblings('.this').addBack().show()
div.this {
  height: 20px;
  background: red;
  display:none;
}
<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>

Upvotes: 3

Kevin B
Kevin B

Reputation: 95022

.find, .first, .siblings, and .addBack will get you the results you want.

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

it'll find the first .this, find siblings that have the class, add the previous selection back to the collection, and then show them.

$('.main').find('.this').first().siblings('.this').addBack().show()
div.this{
  display:none;
}
<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>

Upvotes: 2

Related Questions