jQuery是一款非常受歡迎的JavaScript函式庫，用來簡化HTML文件操作和事件處理。其中一個常見的操作是取代HTML列表項目（li）的內容，在本文中我們將詳細介紹如何使用jQuery完成這個操作。
首先，我們需要一個基本的HTML文檔，包含一個無序列表，每個清單項目都包含一些文字內容。以下是一個範例HTML文件：
<!DOCTYPE html>
<html>
<head>
<title>jQuery 替换 li 内容</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
<li>列表项5</li>
</ul>
</body>
</html>在上述HTML程式碼中，我們包含了一個jQuery的CDN（內容分發網路）連結。這個連結將讓我們能夠在本機上編寫使用jQuery的JavaScript程式碼。
現在，我們將寫一些jQuery程式碼來取代第二個清單項目的內容。首先，我們需要為第二個清單項目新增一個唯一的ID屬性，以便我們可以在jQuery中引用它。以下是將ID屬性新增至第二個清單項目的範例程式碼：
<!DOCTYPE html>
<html>
<head>
<title>jQuery 替换 li 内容</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<ul>
<li>列表项1</li>
<li id="list-item-2">列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
<li>列表项5</li>
</ul>
<script>
$(document).ready(function() {
$('#list-item-2').html('替换后的内容');
});
</script>
</body>
</html>在上述程式碼中，我們將$（document）.ready（）函數用來確保我們的程式碼只有在HTML文件載入完成後才運行。然後，我們使用$（'#list-item-2'）選擇器來選取具有ID「list-item-2」的清單項，使用html（）方法將其內容替換為「替換後的內容」。
現在，我們將看到第二個清單項目的文字已被替換為「替換後的內容」。
如果我們要一次替換多個清單項目的內容，我們可以使用jQuery的each（）方法。以下是一個範例程式碼，用於將第2和第4個清單項目的內容替換為新的文字：
<!DOCTYPE html>
<html>
<head>
<title>jQuery 替换 li 内容</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<ul>
<li>列表项1</li>
<li id="list-item-2">列表项2</li>
<li>列表项3</li>
<li id="list-item-4">列表项4</li>
<li>列表项5</li>
</ul>
<script>
$(document).ready(function() {
var newItemText = '新的文本';
$('#list-item-2, #list-item-4').each(function() {
$(this).html(newItemText);
});
});
</script>
</body>
</html>在上面的程式碼中，我們建立了一個新的變數newItemText，包含要替換的文本。然後，我們使用$（'#list-item-2，#list-item-4'）選擇器選擇第2和第4個列表項，並使用.each（）方法為每個匹配項執行函數。在這個函數中，我們將列表項目的內容替換為新文字。
總結一下，我們在本文中學習如何使用jQuery取代HTML列表項目（li）的內容。無論是替換單一清單項目還是一次替換多個清單項，都可以使用jQuery的html（）方法和each（）方法來完成。現在我們可以輕鬆地操作HTML文件中的元素，為我們的使用者提供更好的使用者體驗。
以上是jquery 替換 li內容的詳細內容。更多資訊請關注PHP中文網其他相關文章！
