Contoh analisis menggunakan kaedah sisipan terbalik untuk operasi pepohon DOM dalam jQuery_jquery

Contoh dalam artikel ini menerangkan kaedah sisipan terbalik operasi pepohon DOM dalam jQuery. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Gunakan kaedah sisipan terbalik

Di sini kita mula-mula memasukkan kandungan yang dicipta di hadapan elemen, dan kemudian memasukkan elemen yang sama ke kedudukan lain dalam dokumen. Secara amnya, apabila memanipulasi elemen dalam jQuery, lebih ringkas dan cekap untuk menggunakan kaedah penggabungan. Tetapi kami tidak mempunyai cara untuk melakukan ini sekarang, kerana ini adalah sasaran .insertBefore() dan kandungan .appendTo(). Pada ketika ini, menggunakan kaedah sisipan terbalik boleh membantu kami menyelesaikan masalah.

Kaedah sisipan seperti .insertBefore() dan .appendTo() biasanya mempunyai kaedah terbalik yang sepadan. Kaedah terbalik juga melakukan operasi yang sama, tetapi "sasaran" dan "kandungan" diterbalikkan. Contohnya:

Salin kod Kod adalah seperti berikut:

$('

Hello

'). appendTo(' #container');

Hasilnya adalah sama seperti kod berikut:

Salin kod Kod adalah seperti berikut:

$('#container').append('

Hello');

Di bawah kita akan menggunakan .before() dan bukannya .insertBefore() untuk membina semula kod, lihat kod berikut:

Salin kod Kod adalah seperti berikut:

$(document).ready(function() {
var $notes = $('

')
.insertBefore('#footer');
$('span.footnote').setiap(fungsi(indeks) {
$(ini)
.sebelum('^{' (indeks 1) '}')
.appendTo($notes)
.wrap('

');
});
});

Sisipkan kaedah panggil balik

Kaedah sisipan terbalik boleh menerima fungsi sebagai parameter, serupa dengan kaedah .attr() dan .css(). Fungsi yang diluluskan akan dipanggil untuk setiap elemen sasaran dan mengembalikan rentetan HTML yang dimasukkan. Teknik ini sebenarnya boleh digunakan di sini, tetapi kerana ia memerlukan pengulangan operasi yang sama untuk setiap nota kaki, adalah lebih jelas untuk menggunakan kaedah .each().

Kini, kita boleh mempertimbangkan langkah terakhir: mencipta pautan ke nota kaki yang sepadan di lokasi yang sepadan dalam teks dan pautan dalam nota kaki ke lokasi dalam teks. Untuk melakukan ini, setiap nota kaki memerlukan empat teg: dua pautan, satu dalam teks dan satu dalam nota kaki dan dua atribut id. Oleh kerana dengan cara ini, parameter yang dihantar kepada kaedah .before() akan menjadi rumit, jadi perlu menggunakan kaedah baharu untuk mencipta rentetan di sini.
Dalam kod di atas, kami menggunakan operator untuk menggabungkan rentetan. Walaupun tiada masalah menggunakan operator,
Jika anda mempunyai terlalu banyak rentetan untuk digabungkan, ia akan kelihatan tidak kemas. Jadi, kami menggunakan kaedah .join() tatasusunan di sini untuk membina tatasusunan yang lebih besar. Dengan kata lain, dua baris kod berikut mempunyai hasil yang sama.

Salin kod Kod adalah seperti berikut:

var str = 'a' 'b' 'c';
var str = ['a', 'b', 'c'].join('');

Walaupun contoh ini memerlukan memasukkan lebih banyak aksara, menggunakan kaedah .join() boleh mengelakkan kekeliruan yang disebabkan oleh terlalu banyak rentetan untuk disambungkan. Mari kita lihat kod sampel sekali lagi Kod berikut ialah proses menggunakan .join() untuk mencipta rentetan.

Salin kod Kod adalah seperti berikut:

$(document).ready(function() {
var $notes = $('

') .insertBefore('#footer'); $('span.footnote').setiap(fungsi(index) { $ (ini)
.sebelum([
'^{', indeks 1,
'}'
].sertai(''))
.appendTo($notes)
.wrap('

');
});
});

Beachten Sie , dass Index 1 nicht in Klammern gesetzt werden muss, da jedes Element des Arrays Operationen separat ausführt. Mit dieser Technik können Sie einen Link am Ende der Seite und einen eindeutigen ID-Wert für das Fußzeilen-Tag hinzufügen. Gleichzeitig muss in der folgenden Methode auch das entsprechende ID-Attribut zum

-Element hinzugefügt werden, damit der Link ein passendes Ziel hat:

Code kopieren Der Code lautet wie folgt:

$(document).ready(function() {
var $notes = $('

') .insertBefore('#footer'); $('span.footnote').each(function(index) { $ (dies)
.before([
'',
'^{', Index 1,
'}'
].join(''))
.appendTo($notes)
.wrap('

');
});
});

Wenn diese Tags hinzugefügt werden, verfügt jedes Fußnoten-Tag über einen Link zur entsprechenden Fußnote am Ende der Seite. Jetzt muss nur noch in der Fußnote ein Link zum Kontext erstellt werden. Dazu können Sie .append() verwenden, die umgekehrte Methode von .appendTo(), siehe folgenden Code:

Code kopieren Der Code lautet wie folgt:

$(document).ready(function() {
var $notes = $('

'"id="context-', Index 1,
'"class = "context__>',
'^{', Index 1,
'}'
].join(''))
.appendTo($notes)
.append([
' (');
});
});

Beachten Sie , dass der href hier auf die ID im Fußnoten-Tag verweist. In den laufenden Ergebnissen sehen Sie eine Fußnote mit dem neuen Link.

Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung hilfreich sein wird.