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

Demo

jQuery .html(function)

$(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>');
});

Demo

$(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>