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>

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


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>

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


39

Coba mulai dengan jQuery

pemilih, '^ =', mis

[id^="jander"]

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


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"]

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>


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.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.