Jquery Как изменить текст определенного класса внутри селектора $ (this)

Question

Моя проблема довольно очевидна, но я не знаю, почему ее решение занимает так много времени.

Посмотрите на мои html:

  {% for d in data %}       
            <div class="chat_list" data-id={{d.id}}>
              <div class="chat_people" >               
                <div class="chat_ib"  >
                  <h5><span class="chat_date">
                 </span></h5>                  
                </div> 
              </div>
            </div>
  {% endfor %}

Я хочу добавить текст по нажатию определенного div. То, что я попробовал в jquery:

$('.chat_list').on('click', function(event){  
    event.preventDefault();
    $( '.chat_date', this).text('hhh')
    $(this).find('.chat_date' ).text('hhh')
    $(this).find( 'chat_people').find('chat_ib').find('.chat_date' ).text('hhh')
 }); 

Ничего не получилось. Когда только $( '.chat_date').text('hhh') текст получить появляется на каждом делении. Есть хорошее решение для этого?

Answer 1

используйте этот скрипт и не забудьте установить положение каждого div. Этот скрипт запускает все, но буквы будут перекрывать друг друга. для позиции вы можете использовать $ (''). css ({top: 12px})

<script>    

    $(document).ready(function(){   
     $('.chat_list').on('click', function(event){  
        event.preventDefault();
        //$( '.chat_date', this).text('hhh') or $(this).find('.chat_date' ).text('hhh')
        $(this).find('.chat_date' ).text('hhh')
        $(this).find('.chat_people' ).text('hhh')
        $(this).find('.chat_ib').text('hhh')

        //$(this).find( 'chat_people').find('chat_ib').find('.chat_date' ).text('hhh') is not function
     }); 
     });
     </script>