Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >jquery menggantikan kandungan li
jquery menggantikan kandungan li
- WBOYasal
- 2023-05-08 21:20:36772semak imbas
jQuery ialah perpustakaan JavaScript yang sangat popular digunakan untuk memudahkan operasi dokumen HTML dan pengendalian acara. Salah satu operasi biasa ialah menggantikan kandungan item senarai HTML (li). Dalam artikel ini kami akan menerangkan secara terperinci cara menggunakan jQuery untuk menyelesaikan operasi ini.
Pertama, kita memerlukan dokumen HTML asas yang mengandungi senarai tidak tersusun, dengan setiap item senarai mengandungi beberapa kandungan teks. Berikut ialah contoh dokumen 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>Dalam kod HTML di atas, kami telah memasukkan pautan jQuery CDN (Rangkaian Penghantaran Kandungan). Pautan ini akan membolehkan kami menulis kod JavaScript secara setempat menggunakan jQuery.
Sekarang, kami akan menulis beberapa kod jQuery untuk menggantikan kandungan item senarai kedua. Pertama, kita perlu menambah atribut ID unik pada item senarai kedua supaya kita boleh merujuknya dalam jQuery. Berikut ialah contoh kod untuk menambah atribut ID pada item senarai kedua:
<!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>Dalam kod di atas, kami menggunakan fungsi $(document).ready() untuk memastikan kod kami hanya dimuatkan apabila HTML dokumen Jalankan hanya selepas selesai. Kami kemudian menggunakan pemilih $('#list-item-2') untuk memilih item senarai dengan ID "list-item-2" dan menggantikan kandungannya dengan "replaced content" menggunakan kaedah html().
Kini kita akan melihat bahawa teks item senarai kedua telah digantikan dengan "kandungan yang diganti".
Jika kami ingin menggantikan kandungan berbilang item senarai serentak, kami boleh menggunakan kaedah each() jQuery. Berikut ialah contoh kod untuk menggantikan kandungan item senarai ke-2 dan ke-4 dengan teks baharu:
<!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>Dalam kod di atas, kami telah mencipta pembolehubah baharu newItemText yang mengandungi kandungan yang akan digantikan teks. Kami kemudian memilih item senarai ke-2 dan ke-4 menggunakan pemilih $('#list-item-2, #list-item-4') dan laksanakan fungsi untuk setiap padanan menggunakan kaedah .each(). Dalam fungsi ini, kami menggantikan kandungan item senarai dengan teks baharu.
Untuk meringkaskan, dalam artikel ini kami mempelajari cara menggantikan kandungan item senarai HTML (li) menggunakan jQuery. Sama ada anda menggantikan item senarai tunggal atau beberapa item senarai sekaligus, ia boleh dilakukan menggunakan kaedah html() jQuery dan kaedah each(). Kini kami boleh memanipulasi elemen dalam dokumen HTML dengan mudah untuk memberikan pengalaman pengguna yang lebih baik untuk pengguna kami.
Atas ialah kandungan terperinci jquery menggantikan kandungan li. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!