试图理解 jquery 中的 .html( function(index, oldhtml) ) [重复]答案

【问题标题】：trying to understand .html( function(index, oldhtml) ) in jquery [duplicate]试图理解 jquery 中的 .html( function(index, oldhtml) ) [重复]
【发布时间】：2013-06-19 08:22:09
【问题描述】：

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>
</head>
<body>
<ul>
<li>item 1</li>
<li class="specia">item 2</li>
<li>item 3</li>
</ul>
</body>
</html>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$( 'li' ).html(function( index, oldHtml ) {
  return oldHtml + '!!!'
});
</script>

问题：

对于这一行：function( index, oldHtml ), 我知道oldHtml 表示li 的html 值，但是index 在这里是什么意思？在我们没有使用index的函数内部，我在这里查看了文档：http://api.jquery.com/html/#html-functionindex--oldhtml，但仍然没有得到它。

【问题讨论】：

标签： jquery

【解决方案1】：

在这种情况下，index 表示li 元素的位置。猜猜你有一个ul 包含五个li 元素，所以$('li')... 将匹配所有五个元素。 index 告诉您选择了哪个元素。一个例子：假设你将有另一个颜色的第二个 li 元素，所以你可以这样做：

$('li').html(function(index, oldHtml) {
    if (index == 2) {
        jQuery(this).css('color', 'red');
    }
});

希望这会有所帮助。

【讨论】：

【解决方案2】：

看起来像一个简单的例子会显示你想要它在做什么：

http://jsfiddle.net/dqjg3/ 生成：

#0 item 1!!!
#1 item 2!!!
#2 item 3!!!

您所指的重载隐式循环遍历选定的元素，但公平地说，API 似乎并没有很清楚地解释这一点。

【讨论】：

【解决方案3】：

index 主要用于获取兄弟编号。假设有4个

标签。

<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
</ul>

现在您想在不遍历的情况下更改第三个节点。在这种情况下，你将使用索引。

$('li').html(function(index, oldHtml) {
    if (index == 3) {
        $(this).text("modified third");
    }
});

【讨论】：