javascript - .next() 在 .each() 循环中不起作用

Question

我正在使用 bootstrap-tooltip 插件来显示工具提示。 我的 HTML 是这样的:

<a href="#" data-role="tooltip" title="">actions</a>
<div class="user-actions">
    <a class="icon" href="/edit">
        <i class="icon-pencil"></i>
    </a>
    <a class="icon" href="/delete">
        <i class="icon-trash"></i>
    </a>
</div>

我的JS:

$(function() {
    $('[data-role=tooltip]').tooltip({
        html: true,
        placement: 'bottom',
        trigger: 'click'
    });

    $('a[data-role=tooltip]').each(function(){
        var content = this.next().html()
        this.attr('title', content);
    });
});

我希望我的脚本做的是循环遍历每个 <a data-role='tooltip' title=''>选择器，然后找到紧随其后的选择器，获取其html并将其作为title的值属性。

但是

这根本行不通。 控制台错误显示:

Uncaught TypeError: Object [object HTMLAnchorElement] has no method 'next'

我做错了什么？我怎样才能让它发挥作用？

Answer 1

this 不是 jQuery 对象。它是一个 DOM 元素。你可以这样做:

$('a[data-role=tooltip]').each(function() {
    $(this).attr('title', $(this).next().html());
});

<小时/>

虽然这样更好:

$('a[data-role=tooltip]').attr("title", function() {
    return $(this).next().html();
});

...因为它只需要您调用 .attr() 一次。