LoginSignup
Halchamdao
@Halchamdao

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

JQueryで最初の子要素をまとめて取得したい

解決したいこと

JQueryで最初の子要素をまとめて取得したい

HTML

<div class="container">
  
  <div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  
  <div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
    
  <div>
    <div>a</div>
    <div>b</div>
    <div>c</div>
  </div>
  
</div>

CSS

.red{
  color:red;
}

.display_none{
  display:none;
}

container内の最初の子要素

  <div>
    <div></div>
    <div></div>
    <div></div>
  </div>

のみを取得して

それ以外の

  <div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
    
  <div>
    <div>a</div>
    <div>b</div>
    <div>c</div>
  </div>

を非表示にする実装が上手くいかないです。

自分で試したこと

JQuery

$(function () {
  $('.container :first-child').addClass('red');
});
  
$(function () {
  $('.container :not(:first-child)').addClass('display_none');
});

これだと孫要素が影響したり、また、not(:first-child)は:first-child以外の認識だったのですが、
そうっぽくない結果が出たりと混乱しております。
実装は配列で表示予定なので、子要素にクラス等はつけないで記述したいと考えています。
どなたかご教授頂けますと助かります、、、。

0

1Answer

こちらはいかがでしょうか?
「>」をつけることで直下の要素のみを指定できます。

$('.container > :not(:first-child)').hide();

See the Pen Untitled by yotty (@yotty) on CodePen.

1

Comments

  1. @Halchamdao

    Questioner
    解消できました!!
    「>」の利用は気付けませんでした。

    いつもありがとうございます!!
    精進します!!

Your answer might help someone💌