Wildcard di pemilih jQuery

669

Saya mencoba menggunakan wildcard untuk mendapatkan id dari semua elemen yang idnya dimulai dengan "jander". Saya mencoba $('#jander*'), $('#jander%')tetapi tidak berhasil ..

Saya tahu saya bisa menggunakan kelas elemen untuk menyelesaikannya, tetapi juga dimungkinkan menggunakan wildcard?

<script type="text/javascript">

  var prueba = [];

  $('#jander').each(function () {
    prueba.push($(this).attr('id'));
  });

  alert(prueba);


});

</script>

<div id="jander1"></div>
<div id="jander2"></div>
jquery jquery-selectors sizzle Ziiweb
sumber
2
Ini adalah pertanyaan tentang jQuery (atau lebih tepatnya mesin Sizzle).
Peter Örneholm
1
Hanya sebuah catatan: Akan jauh lebih cepat untuk melakukannya dengan kelas karena jQuery atau Sizzle dapat menggunakan fungsi-fungsi browser (seharusnya tidak membuat banyak perbedaan untuk browser modern).
Felix Kling
4
kemungkinan duplikat dari ekspresi reguler pemilih JQuery
Robert MacLean
7
Juga, hal penting yang perlu diperhatikan adalah $("[id*=jander]")akan memilih semua elemen dengan ID yang berisi string jander.
Gabriel Ryan Nahmias

Jawaban:

1281

Untuk mendapatkan semua elemen dimulai dengan "jander" Anda harus menggunakan:

$("[id^=jander]")

Untuk mendapatkan yang diakhiri dengan "jander"

$("[id$=jander]")

Lihat juga dokumentasi JQuery

nico
sumber
22
Docs memberikan contoh ini:$('input[name^="news"]').val('news here!')
Brenden
5
Kode berfungsi sebagaimana dimaksud. Tidak perlu melipatgandakan penawaran, itu hanya meningkatkan kemungkinan melewatkan penawaran penutup dan membuatnya kurang mudah dibaca.
nico
4
@nico Cukup menarik, dokumen mengatakan ini berfungsi dengan atribut dan idsecara teknis adalah properti , tapi saya kira dengan rilis terbaru dari jquery (yaitu 1.9) dan bagaimana perubahan terbaru pada atribut dan properti dihilangkan, garisnya sedikit kabur. sehubungan dengan keduanya dan Anda dapat menggunakan pemilih atribut untuk (setidaknya beberapa) properti.
johntrepreneur
Bagaimana jika, saya ingin memilih Even yang dipilih. misalnya: Saat ini saya miliki .col-lg-4:even div:nth-child(1)jika saya ingin melakukan hal yang sama .... apa yang akan saya tulis? "[class^=.col-lg-]:even"? (Sepertinya saya tidak membuatnya bekerja)
Luis Robles
Sedikit perilaku yang mengejutkan saya ---- jika saya menggunakan ini dengan "class $ = ..." itu mencari daftar kelas item, bukan nama-nama kelas individu. Jadi itu hanya hits jika kelas yang dicari adalah kelas terakhir pada item itu. Belum diuji selain Chrome. Dan tidak yakin apakah cacatnya ada di jQuery atau sesuai harapan saya di jQuery.
Roger Krueger
115

Karena judulnya menunjukkan wildcard, Anda juga dapat menggunakan ini:

$(document).ready(function(){
  console.log($('[id*=ander]'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="jander1"></div>
<div id="jander2"></div>
Luaskan cuplikan

Ini akan memilih string yang diberikan di mana saja di id.

Martijn Smidt
sumber
39

Coba mulai dengan jQuery

pemilih, '^ =', mis

[id^="jander"]

Saya harus bertanya, mengapa Anda tidak ingin melakukan ini menggunakan kelas?

GoatInTheMachine
sumber
2
Untuk menambahkan konteks, saya mencari solusi yang sama karena saya menggunakan Django, yang kelas ModelFormnya menentukan ID berdasarkan model, dan sepertinya tidak memungkinkan untuk pengelompokan seperti ini; yaitu HTML di luar kendali saya.
Christian Mann
Ini berguna ketika bekerja dengan ASP.Net WebForms, khususnya Radio dan Daftar Kotak Centang.
DavidScherer
35

untuk kelas Anda dapat menggunakan: 

div[class^="jander"]
lththal
sumber
Saya tidak dapat mengaktifkan ini, mendapatkan pesan tentang sintaks yang tidak valid.
stian
14

Untuk mendapatkan id dari pencocokan wildcard:

$('[id^=pick_]').click(
  function(event) {

    // Do something with the id # here: 
    alert('Picked: '+ event.target.id.slice(5));

  }
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pick_1">moo1</div>
<div id="pick_2">moo2</div>
<div id="pick_3">moo3</div>
Luaskan cuplikan

PJ Brunet
sumber
2
Alih-alih "event.target.id" ini mungkin berfungsi juga: $ (ini) .attr ("id")
PJ Brunet
10

Ketika Anda memiliki string id yang lebih kompleks, tanda kutip ganda wajib.

Misalnya jika Anda memiliki id seperti ini id="2.2":, cara yang benar untuk mengaksesnya adalah:$('input[id="2.2"]')

Sebisa mungkin gunakan tanda kutip ganda, untuk alasan keamanan.

eduard
sumber