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属性的值。

BUT

它只是不起作用。控制台错误说：

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

Answer 2

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

Answer 3

只需将其包裹起来：

$(this)代替this

Answer 4

查看.each()的文档：

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

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

.next（）在.each（）循环中不起作用

4 个答案: