children().children()とかやってないよね？

<a class="keyword" href="http://d.hatena.ne.jp/keyword/jQuery">jQuery</a> f:id:TomozQ:20210821115046j:plain

jQuery備忘録 Vol.2

今回は子要素以下の特定の要素を取得する方法です。

find()

index.html

<body>
  <div>
    <p>children().children()とかやってないよね？！</p>
    <div class='content'>
      <ul class="ul_1">
        <li id='1'>1</li>
        <li id='2'>2</li>
        <li id='3'>3</li>
      </ul>
      <button class="button">はいっ！</button>
    </div>
    <div class='content'>
      <ul class="ul_2">
        <li id='4'>4</li>
        <li id='5'>5</li>
        <li id='6'>6</li>
      </ul>
      <button class="button">はいっ！</button>
    </div>
    <div class='content'>
      <ul class="ul_3">
        <li id='7'>7</li>
        <li id='8'>8</li>
        <li id='9'>9</li>
      </ul>
      <button id="surprise" class="button">はいっ！</button>
    </div>
  </div>
  <script>
    $(function(){
    $('button').on('click', function(){
      if( $(this).attr('id') == 'surprise' ){
        supEl = $(this).parent().find('ul')
        $(supEl).empty()
        $('<img>', {src: '3596948_s.jpg',}).appendTo(supEl)
      }else{
        els = $(this).parent().find('li')
        $.each(els, function(index, val){
          $(val).text('あぁぁぁぁぁ')
        })
      }
    })
  })
  </script>
</body>