Rumah >hujung hadapan web >tutorial js >Bagaimanakah Saya Boleh Memilih Nod Teks dengan jQuery?
Menyiasat Nod Teks dengan jQuery
jQuery menawarkan fungsi yang mantap untuk manipulasi dan traversal DOM. Walau bagaimanapun, ia tidak menyediakan kaedah mudah untuk memilih nod teks, yang penting untuk mengakses kandungan teks elemen.
Penyelesaian
Untuk menangani perkara ini, anda boleh memanfaatkan kuasa kandungan jQuery() dan fungsi find(). contents() mendapatkan semula semua nod anak, termasuk nod teks, manakala find() menyasarkan elemen keturunan. Dengan menggabungkan kedua-dua fungsi ini, anda boleh mendapatkan koleksi jQuery dengan berkesan yang mengandungi semua nod teks turunan.
var getTextNodesIn = function(el) { return $(el).find(":not(iframe)").addBack().contents().filter(function() { return this.nodeType == 3; }); };
Pendekatan ini mengecualikan elemen iframe daripada pemilihan untuk mengelakkan kelemahan skrip merentas tapak.
Kaveat untuk jQuery Versi 1.7 dan Terdahulu
Untuk versi jQuery sebelum 1.8, kod di atas tidak akan berfungsi dengan betul. Untuk membetulkan perkara ini:
Sebagai alternatif: DOM Tulen Penyelesaian
Untuk kecekapan, pertimbangkan untuk menggunakan fungsi rekursif untuk melintasi DOM dan mengumpul nod teks:
function getTextNodesIn(node, includeWhitespaceNodes) { var textNodes = [], nonWhitespaceMatcher = /\S/; function getTextNodes(node) { if (node.nodeType == 3) { if (includeWhitespaceNodes || nonWhitespaceMatcher.test(node.nodeValue)) { textNodes.push(node); } } else { for (var i = 0, len = node.childNodes.length; i < len; ++i) { getTextNodes(node.childNodes[i]); } } } getTextNodes(node); return textNodes; }
Penyelesaian ini memberikan fleksibiliti dengan membenarkan anda memasukkan atau mengecualikan nod teks ruang putih .
Kesimpulannya, kaedah ini memberi kuasa kepada anda untuk memilih nod teks dengan berkesan dalam elemen, memberikan anda kawalan yang tepat ke atas teks manipulasi.
Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memilih Nod Teks dengan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!