jQuery .html（）方法函數文字參數

Question

為什么下面的兩個語句不能完成相同的事情？

$('li.list1').html(function() {
return '<em>' + $(this).text() + '</em>';
});

和：

$('li.list1').html('<em>' + $(this).text() + '</em>');

Answer 1

根據文檔， .html()回調用於替換所選元素的內容時會清空它。

如果在回調中使用function ，則會返回兩個參數：元素的index及其當前內容（清空之前）。

因此，您可以這樣做：

$('li.list1').html(function (index, oldHtml) {
    return '<em>' + oldHtml+ '</em>';
});

演示

jQuery .html（函數）

 $(function () { $('li.list1').html(function (index, data) { return '<em>' + data + '</em>'; }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li class="list1">Text</li> </ul> 

這種方式行不通： $('li.list1').html('<em>' + $(this).text() + '</em>');

$(this)這里指的是jQuery對象Window ，除非它在某種包裝器之內，例如事件處理程序：

$('li.list1').on('click', function () {
    $(this).html('<em>' + $(this).text() + '</em>');
});

演示

 $(function () { $('li.list1').on('click', function () { $(this).html('<em>' + $(this).text() + '</em>'); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li class="list1">Text</li> </ul>