jQuery 设置 li 的文本

在本文中，我们将介绍如何使用 jQuery 来设置 li 元素的文本内容。无论是添加新的文本还是修改已存在的文本，jQuery 提供了简单易用的方法来实现。

阅读更多：jQuery 教程

设置文本内容

使用 jQuery 设置 li 元素的文本内容非常简单。我们可以通过选取 li 元素，并使用 .text() 方法来设置新的文本内容。下面是一个示例：

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Orange</li>
</ul>

<script>
  // 选取第二个 li 元素，并设置其文本内容为 "Grape"
  $("li:eq(1)").text("Grape");
</script>

在上面的示例中，我们通过使用选择器 :eq(1) 选取了第二个 li 元素，然后使用 .text("Grape") 方法将其文本内容设置为 “Grape”。运行示例代码后，第二个 li 元素的文本将变为 “Grape”。

修改已存在的文本内容

除了设置新的文本内容，我们还可以使用 jQuery 修改已存在的文本。通常情况下，我们首先需要获取 li 元素的当前文本内容，然后根据需要进行修改。下面是一个示例：

<ul id="fruits">
  <li>Apple</li>
  <li>Banana</li>
  <li>Orange</li>
</ul>

<script>
  // 获取第一个 li 元素的文本内容
  var fruit = ("#fruits li:first").text();

  // 在当前文本内容的基础上添加新的内容("#fruits li:first").text(fruit + " Pie");
</script>

在上面的示例中，我们首先使用 $("#fruits li:first").text() 获取了第一个 li 元素的文本内容，并赋值给变量 fruit。然后我们使用 .text(fruit + " Pie") 方法，将新的文本内容设置为当前文本内容（fruit）加上 ” Pie”。运行示例代码后，第一个 li 元素的文本将变为 “Apple Pie”。

总结

本文介绍了如何使用 jQuery 设置 li 元素的文本内容。通过使用 .text() 方法，我们可以轻松地设置新的文本内容或者修改已存在的文本内容。希望本文能帮助你更好地理解和应用 jQuery 中关于设置 li 文本的方法。祝你使用愉快！