Bisakah saya dengan mudah bertukar dua elemen dengan jQuery?
Saya ingin melakukan ini dengan satu baris jika memungkinkan.
Saya memiliki elemen pilih dan saya memiliki dua tombol untuk bergerak ke atas atau ke bawah opsi, dan saya sudah memiliki pemilih yang dipilih dan tujuan di tempat, saya melakukannya dengan jika, tetapi saya bertanya-tanya apakah ada cara yang lebih mudah.
jquery
swap
javascript
juan
sumber
sumber
Jawaban:
Saya telah menemukan cara yang menarik untuk menyelesaikan ini hanya menggunakan jQuery:
atau
:)
sumber
Paulo benar, tapi saya tidak yakin mengapa dia mengkloning elemen yang terkait. Ini tidak benar-benar diperlukan dan akan kehilangan referensi atau acara pendengar yang terkait dengan elemen dan keturunan mereka.
Berikut adalah versi non-kloning yang menggunakan metode DOM biasa (karena jQuery tidak benar-benar memiliki fungsi khusus untuk membuat operasi khusus ini lebih mudah):
sumber
Tidak, tidak ada, tetapi Anda bisa menyiapkannya:
Pemakaian:
Catatan ini hanya berfungsi jika penyeleksi hanya mencocokkan 1 elemen masing-masing, jika tidak maka akan memberikan hasil yang aneh.
sumber
Ada banyak kasus tepi untuk masalah ini, yang tidak ditangani oleh jawaban yang diterima atau jawaban bobince. Solusi lain yang melibatkan kloning berada di jalur yang benar, tetapi kloning itu mahal dan tidak perlu. Kita tergoda untuk mengkloning, karena masalah kuno tentang bagaimana menukar dua variabel, di mana salah satu langkahnya adalah menetapkan salah satu variabel ke variabel sementara. Tugas, (kloning), dalam hal ini tidak diperlukan. Berikut ini adalah solusi berbasis jQuery:
sumber
Banyak dari jawaban ini benar-benar salah untuk kasus umum, yang lain tidak perlu rumit jika mereka bahkan bekerja. JQuery
.before
dan.after
metode melakukan sebagian besar dari apa yang ingin Anda lakukan, tetapi Anda memerlukan elemen ke-3 cara banyak algoritma swap bekerja. Ini cukup sederhana - jadikan elemen DOM sementara sebagai pengganti saat Anda memindahkan barang. Tidak perlu melihat orang tua atau saudara kandung, dan tentu saja tidak perlu mengkloning ...1) meletakkan div sementara
temp
sebelumthis
2) bergerak
this
sebelumnyathat
3) bergerak
that
setelahtemp
3b) hapus
temp
Maka sederhananya
DEMO: http://codepen.io/anon/pen/akYajE
sumber
Anda seharusnya tidak perlu dua klon, satu akan dilakukan. Mengambil jawaban Paolo Bergantino, kita memiliki:
Seharusnya lebih cepat. Melewati elemen yang lebih kecil dari dua elemen juga harus mempercepat.
sumber
Saya menggunakan teknik seperti ini sebelumnya. Saya menggunakannya untuk daftar konektor di http://mybackupbox.com
sumber
end()
jika Anda tidak melanjutkan rantai. bagaimana dengan$('element1').clone().before('element2').end().replaceWith('element2');
clone()
saja tidak menyimpan jquery apa pundata()
kecuali Anda menentukanclone(true)
- perbedaan penting jika Anda menyortir sehingga Anda tidak kehilangan semua data AndaSaya telah membuat fungsi yang memungkinkan Anda untuk memindahkan beberapa opsi yang dipilih ke atas atau ke bawah
Ketergantungan:
Pertama memeriksa apakah opsi pertama / terakhir yang dipilih dapat bergerak naik / turun. Kemudian ia melewati semua elemen dan panggilan
sumber
yang lain tanpa kloning:
Saya memiliki elemen aktual dan nominal untuk ditukar:
kemudian
insert <div> before
danremove
sesudahnya hanya diperlukan, jika Anda tidak dapat memastikan, bahwa selalu ada elemen sebelum (dalam kasus saya itu)sumber
.prev()
panjangnya, dan jika 0, maka.prepend()
ke.parent()
:) Dengan begitu Anda tidak perlu membuat elemen tambahan.lihat di plugin jQuery "Swapable"
http://code.google.com/p/jquery-swapable/
itu dibangun di atas "Sortable" dan terlihat seperti sortable (drag-n-drop, placeholder, dll.) tetapi hanya menukar dua elemen: diseret dan dilepaskan. Semua elemen lain tidak terpengaruh dan tetap pada posisi mereka saat ini.
sumber
Ini adalah jawaban berdasarkan @lotif logika jawaban , tetapi sedikit lebih umum
Jika Anda menambahkan / menambahkan setelah / sebelum elemen benar-benar dipindahkan
=> tidak ada clonning yang diperlukan
=> acara disimpan
Ada dua kasus yang bisa terjadi
.prev()
ious" => kita dapat menempatkan target lain.after()
itu..parent()
=> kita dapat.prepend()
target lain untuk orang tua.Kode
Kode ini dapat dilakukan lebih pendek, tetapi saya tetap menggunakan cara ini agar mudah dibaca. Perhatikan bahwa orangtua yang berprestasi (jika perlu) dan elemen sebelumnya adalah wajib.
... jangan ragu untuk membungkus kode bagian dalam suatu fungsi :)
Contoh biola memiliki acara klik ekstra terlampir untuk menunjukkan pelestarian acara ...
Contoh biola: https://jsfiddle.net/ewroodqa/
... akan bekerja untuk berbagai kasus - bahkan satu seperti:
sumber
Ini adalah solusi saya untuk memindahkan beberapa elemen anak ke atas dan ke bawah di dalam elemen induk. Berfungsi dengan baik untuk memindahkan opsi yang dipilih di listbox (
<select multiple></select>
)Pindah ke atas:
Turunkan:
sumber
Jika Anda ingin menukar dua item yang dipilih di objek jQuery, Anda dapat menggunakan metode ini
http://www.vertstudios.com/blog/swap-jquery-plugin/
sumber
Saya ingin penyihir solusi tidak menggunakan clone () karena memiliki efek samping dengan peristiwa terlampir, inilah yang akhirnya saya lakukan
itu tidak boleh digunakan dengan objek jQuery yang mengandung lebih dari satu elemen DOM
sumber
Jika Anda memiliki banyak salinan dari setiap elemen, Anda perlu melakukan sesuatu dalam satu lingkaran secara alami. Saya mengalami situasi ini baru-baru ini. Dua elemen berulang yang saya butuhkan untuk beralih memiliki kelas dan div kontainer seperti:
Kode berikut memungkinkan saya untuk mengulangi semuanya dan membalikkan ...
sumber
Saya telah melakukannya dengan cuplikan ini
sumber
Saya membuat tabel untuk mengubah urutan objek dalam database yang digunakan .after () .before (), jadi ini dari eksperimen saya.
Apakah memasukkan obj1 sebelum obj2 dan
lakukan sebaliknya.
Jadi jika obj1 adalah setelah obj3 dan obj2 setelah dari obj4, dan jika Anda ingin mengubah obj1 dan obj2 tempat Anda akan melakukannya seperti
Ini harus dilakukan BTW Anda dapat menggunakan .prev () dan .next () untuk menemukan obj3 dan obj4 jika Anda belum memiliki semacam indeks untuk itu.
sumber
jika nodeA dan nodeB adalah saudara kandung, suka dua
<tr>
sama<tbody>
, Anda bisa menggunakan$(trA).insertAfter($(trB))
atau$(trA).insertBefore($(trB))
menukar mereka, itu berfungsi untuk saya. dan Anda tidak perlu menelepon$(trA).remove()
sebelumnya, kalau tidak Anda harus mengikat kembali beberapa acara klik$(trA)
sumber
Buat fungsi jQuery seperti ini
Terima kasih kepada Yannick Guinness di https://jsfiddle.net/ARTsinn/TVjnr/
sumber
Pilihan terbaik adalah mengklona mereka dengan metode clone ().
sumber
Saya pikir Anda bisa melakukannya dengan sangat sederhana. Misalnya, Anda memiliki struktur berikut: ...
dan hasilnya seharusnya
jquery:
Saya harap ini membantu!
sumber