Вывести аттрибут родителя Jquery

261

08 августа 2021, 14:30

где ошибся, пытаюсь вывести атрибут родителя, но выдает undefined

$("body").on("click",'.comment--item .rcomment', function() { 
    let comment = $(this).parent('.comment--item').attr('data-id'); 
    console.log(comment); 
});

<li class="comment--item" data-id="25356"> 
  <div class="comment--user"> 
    <div class="comment--footer"> 
      <div class="btn--action"> 
        <button class="btn-link rcomment">Ответить</button> 
        <button class="btn-link">Ссылка</button> 
        <button class="btn-link">Пожаловаться</button> 
        <button class="btn-link">Поделиться</button> 
      </div> 
    </div> 
  </div> 
</li> 
<script 
  src="https://code.jquery.com/jquery-3.4.1.min.js" 
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" 
  crossorigin="anonymous"></script>

Answer 1

Замените parent на parents

$("body").on("click",'.comment--item .rcomment', function() { 
    let comment = $(this).parents('.comment--item').attr('data-id'); 
    console.log(comment); 
});

<li class="comment--item" data-id="25356"> 
  <div class="comment--user"> 
    <div class="comment--footer"> 
      <div class="btn--action"> 
        <button class="btn-link rcomment">Ответить</button> 
        <button class="btn-link">Ссылка</button> 
        <button class="btn-link">Пожаловаться</button> 
        <button class="btn-link">Поделиться</button> 
      </div> 
    </div> 
  </div> 
</li> 
<script 
  src="https://code.jquery.com/jquery-3.4.1.min.js" 
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" 
  crossorigin="anonymous"></script>

Answer 2

То же самое, только на чистом js, просто для общего развития )

document.body.addEventListener('click', 
  e => { 
    if (e.target.matches('.comment--item .rcomment')) { 
      const dataId = e.target.closest('.comment--item').dataset.id 
      console.log(dataId) 
    } 
  })

<li class="comment--item" data-id="25356"> 
  <div class="comment--user"> 
    <div class="comment--footer"> 
      <div class="btn--action"> 
        <button class="btn-link rcomment">Ответить</button> 
        <button class="btn-link">Ссылка</button> 
        <button class="btn-link">Пожаловаться</button> 
        <button class="btn-link">Поделиться</button> 
      </div> 
    </div> 
  </div> 
</li>