0

我正在使用 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'

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

4

4 回答 4

5

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()一次。

于 2013-09-12T14:41:26.600 回答
0

把它包起来：

$(this)代替this

于 2013-09-12T14:42:16.657 回答
0

查看文档.each()：

该.each()方法旨在使 DOM 循环结构简洁且不易出错。当被调用时，它会遍历作为 jQuery 对象一部分的 DOM 元素。每次回调运行时，都会传递当前循环迭代，从 0 开始。更重要的是，回调是在当前 DOM 元素的上下文中触发的，因此关键字this是指该元素。

所以this指的是一个HTMLElement对象（或 的子类HTMLElement，正如您在记录的异常中看到的那样）。您需要像$(this)在能够在其上调用 jQuery 方法之前一样包装它。

于 2013-09-12T14:43:01.947 回答
0

this指的是原始 dom 元素 - 并且需要先包装，然后再对其使用 jquery 方法。

$('a[data-role=tooltip]').each(function(){
    // cache the jquery object
    var $this = $(this);
    var content = $this.next().html()
    $this.attr('title', content);
});
于 2013-09-12T14:41:19.067 回答