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>");

现在这些按钮需要触发一个功能，并发送data-user-id。单击按钮时，该用户的所有帖子将获得不同的背景颜色。

关于如何在每个帖子中获取父母的data-user-id'的想法？

Answer 1

jQuery的closest()在这里是你的朋友。它遍历选择器的祖先并返回第一个匹配的元素。

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

Answer 2

您可以从触发事件的元素（this）遍历dom到最近的<div class="body-message">，并使用jQuery data-user-id获取data()值功能。

// 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存储..

Jquery - 添加父类以链接到子级

3 个答案: