jQuery.html(）方法函数文字参数

jQuery .html() method function literal argument

本文关键字：函数 文字 参数 方法 html jQuery      更新时间：2023-09-26

为什么下面的两个语句不能完成相同的事情？

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

和：

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

根据文档，.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>');
});

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>

相关文章：