.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.

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 относится к элементу raw 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 зацикливания конструкции кратким и менее подвержены ошибкам. Когда он называется, он выполняет итерацию над элементами DOM, которые являются частью объекта jQuery. Каждый раз, когда выполняется обратный вызов, он пропускает текущую итерацию цикла, начиная с 0. . Что еще более важно, обратный вызов запускается в контексте текущего элемента DOM, поэтому ключевое слово this относится к элементу.

Так this относится к HTMLElement объекта (или подкласса HTMLElement, как вы видите в этом журнале за исключением). Вам нужно будет обернуть его, как $(this), прежде чем сможете вызвать на нем методы jQuery.