jQuery Selector: Id Ends With?

393

Apakah ada selectoryang bisa saya query untuk elemen dengan ID yang diakhiri dengan string yang diberikan?

Katakanlah saya memiliki elemen dengan id ctl00$ContentBody$txtTitle. Bagaimana saya bisa mendapatkan ini dengan melewati saja txtTitle?

jquery jquery-selectors

— Josh Stodola
sumber

16

mangling ID halaman master lama yang bagus!

— Matthew Lock

1

Diatur ClientIDMode=staticdari ASP.Net 4.0 dan seterusnya dan singkirkan ini :)

— Murali Murugesan

1

ClientIDMode = statis tidak akan berfungsi bagi mereka yang mencoba menemukan elemen dalam pengulang!

— Stuart

629

Jika Anda tahu jenis elemennya maka: (mis: ganti 'elemen' dengan 'div')

$("element[id$='txtTitle']")

Jika Anda tidak tahu jenis elemen:

$("[id$='txtTitle']")

Informasi lebih lanjut tersedia

Tampilkan cuplikan kode

// the old way, needs exact ID: document.getElementById("hi").value = "kk";
$(function() {
  $("[id$='txtTitle']").val("zz");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="ctl_blabla_txtTitle" type="text" />

Luaskan cuplikan

— Mark Hurd
sumber

10

Saya akan mencarinya dengan '$ txtTitle'. Ini tidak terlalu berisiko dengan awalan 'txt', tetapi jika Anda pemilih adalah 'NameTextBox', itu akan cocok dengan 'NameTextBox', 'FirstNameTextBox', LastNameTextBox ', dll.

— Mark

11

Pengguna anonim baru saja mencoba untuk mengedit berikut ini. Menambahkannya sebagai komentar (sepertinya masuk akal): Ini tidak memberikan elemen yang diakhiri dengan id txtTitle. Berikut ini adalah dokumen: api.jquery.com/element-selector ..element selector sama dengan getElementsByTagName. Itu tidak ada hubungannya dengan id elemen. Jika Anda ingin mengakses elemen yang diakhiri dengan id, maka gunakan sintaks ini $ ("[id $ = 'txtTitle']") atau jika Anda tahu jenis elemen ..eg div ..kemudian gunakan sintaks ini $ ("div [id $ = 'txtTitle'] ")

— Pekka

1

Tautan sangat bermanfaat. Bukan halaman itu sendiri, tetapi dipisah menjadi 2 halaman tambahan, yang saya butuhkan. Saya belajar cara menangkap segmen judul, seperti jika ID muncul sebagai "masterPage1_Control0_MyTableName_moreStuff" di View Source, saya bisa mengunci tabel <asp: Table ID = "MyTable" ... dengan menggunakan $ ("id * = MyTable] "). Kalau dipikir-pikir, saya suka id $ lebih baik. Hmmm ...

— Lukas

Ini menemukan elemen document.getElementById("f:fTest:j_idt51:0:inpTest"). Ini tidak $("[id$='inpTest']"). Apakah ini karena titik dua tidak diperbolehkan dalam ID (tetapi JSF menambahkannya!)?

— Panu Haaramo

Apakah ada cara untuk menggunakan pemilih ini dengan CSS, seperti pseudo-selektor?

— Alejandro Nava

250

Jawaban atas pertanyaannya adalah $("[id$='txtTitle']"), seperti yang dijawab Mark Hurd , tetapi bagi mereka yang, seperti saya, ingin menemukan semua elemen dengan id yang dimulai dengan string yang diberikan (misalnya txtTitle), coba ini ( doc ):

$("[id^='txtTitle']")

Jika Anda ingin memilih elemen id mana yang berisi string ( doc ) yang diberikan:

$("[id*='txtTitle']")

Jika Anda ingin memilih elemen yang bukan merupakan string ( doc ) yang diberikan:

$("[id!='myValue']")

(Ini juga cocok dengan elemen yang tidak memiliki atribut yang ditentukan)

Jika Anda ingin memilih elemen yang idnya berisi kata yang diberikan, dibatasi oleh spasi ( doc ):

$("[id~='myValue']")

Jika Anda ingin memilih elemen id mana yang sama dengan string yang diberikan atau dimulai dengan string yang diikuti oleh tanda hubung ( doc ):

$("[id|='myValue']")

— Romain Guidoux
sumber

Jika Anda menambahkan satu yang benar-benar menjawab pertanyaan yaitu $ ("[id $ = 'txtTitle']") dan letakkan dulu di daftar saya akan memilih suara jawaban Anda. Saya tidak bisa saat ini karena Anda tidak menjawab pertanyaan

— Alan Macdonald

2

@AlanMacdonald Saya tidak yakin apakah benar untuk menambahkannya. Saya menjawab pertanyaan lama setelah jawaban diterima, hanya untuk menambah informasi bagi pengunjung. Saya harap orang-orang yang mendukung jawaban saya juga mendukung jawaban atas pertanyaan itu.

— Romain Guidoux

1

@ DomainGuidoux cukup adil itu panggilan Anda, tapi saya tidak memilih jawaban yang tidak menawarkan solusi untuk pertanyaan yang diajukan karena tidak jelas bagi pemula yang mengalami masalah yang sama dengan OP jika mereka datang ke halaman dan ada up memilih jawaban yang bahkan tidak menjawab pertanyaan. Jika Anda mengubahnya untuk menjawab pertanyaan, saya akan memilih jawaban Anda alih-alih jawaban yang diterima karena itu adalah jawaban yang lebih penuh dan lebih berguna. Eter itu atau itu seharusnya komentar pada jawaban yang diterima daripada jawaban untuk pertanyaan.

— Alan Macdonald

1

@AlanMacdonald Selesai, Anda meyakinkan saya.

— Romain Guidoux

33

Mencoba

$("element[id$='txtTitle']");

sunting: terlambat 4 detik: P

— kkyy
sumber

32

$('element[id$=txtTitle]')

Tidak perlu mengutip kutipan teks yang cocok dengan Anda

— Scott Evernden
sumber

2

Ini harus menjadi jawaban yang tepat! Menggunakan "dan 'hanya membingungkan.

— Kees C. Bakker

13

Lebih aman untuk menambahkan garis bawah atau $ pada istilah yang Anda cari sehingga cenderung tidak cocok dengan elemen lain yang diakhiri dengan ID yang sama:

$("element[id$=_txtTitle]")

(di mana elemen adalah tipe elemen yang Anda coba temukan - misalnya div, inputdll.

(Catatan, Anda menyarankan ID Anda cenderung memiliki tanda $ di dalamnya, tapi saya pikir .NET 2 sekarang cenderung menggunakan garis bawah dalam ID sebagai gantinya, jadi contoh saya menggunakan garis bawah).

— Nick Gilbert
sumber

1

Ya kamu benar. Properti ID menggunakan garis bawah. Properti nama menggunakan tanda dolar.

— Josh Stodola

3

Contoh: untuk memilih semua <a>s dengan ID yang diakhiri dengan _edit:

jQuery("a[id$=_edit]")

atau

jQuery("a[id$='_edit']")

— Anton K
sumber

3

Karena ini adalah ASP.NET, Anda cukup menggunakan tag ASP <% =%> untuk mencetak ClientID yang dihasilkan dari txtTitle:

$('<%= txtTitle.ClientID %>')

Ini akan menghasilkan ...

$('ctl00$ContentBody$txtTitle')

... saat halaman diberikan.

Catatan: Di Visual Studio, Intellisense akan membentak Anda karena menempatkan tag ASP di JavaScript. Anda dapat mengabaikan ini karena hasilnya adalah JavaScript yang valid.

— Michael
sumber

4

OP tidak memiliki 'ctl00$ContentBody$txtTitle', dia punya 'txtTitle', dan Anda kehilangan yang memimpin #untuk mencocokkan id. Tetapi OP telah menolak saran serupa (sejak dihapus): Ini tidak akan berfungsi kecuali saya meletakkan Javascript saya langsung di markup, yang merupakan mimpi buruk organisasi. Pemisahan perilaku sangat penting untuk proyek ini.

— Martijn Pieters

1

Coba ini:

<asp:HiddenField ID="0858674_h" Value="0" runat="server" />

var test = $(this).find('[id*="_h"').val();

— pawel
sumber

0

Untuk menemukan id iframe yang diakhiri dengan "iFrame" di dalam halaman yang berisi banyak iframe.

jQuery(document).ready(function (){     
                  jQuery("iframe").each(function(){                     
                    if( jQuery(this).attr('id').match(/_iFrame/) ) {
                            alert(jQuery(this).attr('id'));

                     }                   
                  });     
         });

— neelmeg
sumber