JQuery - Добавить родительский класс для ссылки в дочернем объекте

Question

Я работаю над расширением Chrome для форума. Вот кусок HTML с резьбовым страницы:

<div class="body_message" data-message-id="198342" data-topic-id="2876" data-user-id="1769"> 
    <div class="uk-grid post_wrapper"> 
     <div class="uk-width-medium-1-6"> 
      <div class="poster"> 
       <h4></h4> 
       <ul class="reset smalltext" id="msg_198342_extra_info"> 
        <li class="postcount">194</li> 
        <li class="online">Online:</li> 
        <li class="profile"></li> 
       </ul> 
      </div> 
     </div> 
    </div> 
</div> 

добавить кнопки (img0, img1, img2, img3) на каждую должность:

$("li.profile").before("<li class='verdacht smalltext'>Verdenking: "+img0 + img1 + img2 + img3 +"</li>"); 

Теперь эти кнопки нужно вызвать функцию , и отправьте идентификатор данных-пользователя. Когда нажимается кнопка, все сообщения от этого пользователя получат другой цвет фона.

Любая идея о том, как получить данные пользователя-идентификатора родителей, в каждом столбце?

Answer 1

jQuery's closest() - ваш друг здесь. Он пересекает предков селекторов и возвращает первый согласованный элемент.

var userId = $('.profile').closest('.body_message').data('user-id'); 

Answer 2

Вы можете пройти вверх РОМ от элемента, который уволил событие (this) к ближайшему <div class="body-message"> и получить значение data-user-id с помощью data() функции JQuery в.

// assuming img0 is a jQuery object 
img0.on('click',function(e){ 
    var data = $(this).closest('.body_message').data('user-id'); 
    // do whatever you need in the click event 
}); 

Answer 3

У меня есть работа, благодаря вашим предложениям!

$("li.profile").each(function() { 
    var userId = $(this).closest('.body_message').data('user-id'); 
    $(this).before("<li class='verdacht smalltext'>Verdenking: "+img0 + img1 + img2 + img3 + userId +"</li>"); 
}); 

Следующая вещь, чтобы выяснить, является хранение Chrome ..