Menggunakan jQuery, saya ingin memilih tautan yang berisi persis semacam teks. Sebagai contoh:
<p><a>This One</a></p>
<p><a>"This One?"</a></p>
<p><a>Unlikely</a></p>
Saya sudah mencoba ini:
$('a:contains("This One")')
Tapi itu memilih tautan pertama DAN kedua. Saya hanya ingin tautan pertama, yang berisi persis "Yang Ini". Bagaimana saya bisa melakukan itu?
jquery
jquery-1.6
Endy Tjahjono
sumber
sumber
Jawaban:
Kamu bisa melakukan ini:
$('a').filter(function(index) { return $(this).text() === "This One"; });
Referensi: http://api.jquery.com/filter/
sumber
return
. Saya harus mengubahnya menjadifunction(index) { return (this.text === 'This One') }
Seorang rekan kerja saya memperluas jQuery dengan fungsi untuk melakukan ini:
$.expr[':'].textEquals = function(a, i, m) { return $(a).text().match("^" + m[3] + "$"); };
Hasilnya adalah Anda dapat memilih sesuatu dengan teks persis seperti ini:
$("label:textEquals('Exact Text to Match')");
Ini membuatnya mudah, karena Anda tidak perlu mengingat sintaks persis setiap saat. Seluruh posnya ada di sini: jQuery Custom Selector untuk memilih elemen dengan teks yang tepat: textEquals
sumber
Untuk memperluas jawaban FishBasketGordo. Jika Anda mencoba membuat pilihan pada banyak elemen, gunakan
:contains()
pertama untuk mempersempit dan kemudian terapkan filter.Ini akan meningkatkan kecepatan keseluruhan:
$('a:contains("This One")').filter(function(index) { return $(this).text() === "This One"; });
sumber
harus memodifikasi solusi Nariman menjadi:
$.expr[':'].textEquals = function(a, i, m) { var match = $(a).text().match("^" + m[3] + "$") return match && match.length > 0; }
Jika tidak, tidak berfungsi di chrome (Linux)
sumber
Saya menggunakan ekstensi
$.expr[':'].textEquals
Tetapi saya telah menemukan bahwa implementasinya tidak lagi berfungsi dengan jQuery 1.7 (tampaknya merupakan perubahan di Sizzla.filter). Setelah berjuang selama beberapa waktu untuk membuatnya bekerja, saya hanya menulis plugin jQuery untuk mencapai hal yang sama.
$.fn.textEquals = function (text) { var match = false; $(this).each(function () { if ($(this).text().match("^" + escapeRegex(text) + "$")) { match = true; return false; } }); return match; };
Menggunakan:
$(".ui-autocomplete li").textEquals('Exact Text to Match');
Hanya ingin berbagi, jika ada orang lain yang mengalami ini (,
sumber
Jadi, jawaban Narnian bekerja dengan cukup baik. Namun, menggunakannya di alam liar, saya mengalami beberapa masalah, di mana hal-hal yang saya harapkan dapat ditemukan tidak ditemukan. Ini karena terkadang ada spasi kosong acak yang mengelilingi teks elemen. Menurut saya, jika Anda mencari "Hello World", Anda pasti ingin kata itu cocok dengan "Hello World", atau bahkan "Hello World \ n". Jadi, saya baru saja menambahkan metode "trim ()" ke fungsi tersebut, yang menghapus spasi di sekitarnya, dan itu mulai bekerja lebih baik. Juga, saya memodifikasi nama variabel menjadi sedikit lebih jelas bagi saya.
Secara khusus...
$.expr[':'].textEquals = function(el, i, m) { var searchText = m[3]; var match = $(el).text().trim().match("^" + searchText + "$") return match && match.length > 0; }
Dan catatan sekunder ... trim hanya menghapus spasi sebelum dan sesudah teks yang dicari. Itu tidak menghapus spasi di tengah kata. Saya yakin ini adalah perilaku yang diinginkan, tetapi Anda dapat mengubahnya jika Anda mau.
sumber
$('a:contains("This One")')[0];
Saya merasa seperti saya kehilangan sesuatu berdasarkan jawaban orang lain untuk disaring, tetapi mengapa tidak memilih item pertama dalam larik elemen yang dikembalikan oleh 'berisi'?Ini berfungsi, hanya jika Anda tahu bahwa tautan pertama memiliki kecocokan persis dengan yang Anda cari. Jawaban lain berfungsi lebih baik, jika Anda tidak yakin di urutan mana tautan itu berada.
sumber
Cara mendapatkan nilai yang dipilih dari drop-dwon:
$.fn.textEquals = function (text) { var match = false; var values=""; $(this).each(function () { if ($(this).text().match("^" + text + "$")) { values=$(this).val(); match = true; return false; } }); return values; };
console.log($("option").textEquals("Option One"));
- ini akan mengembalikan nilai drop-downsumber
var link = $('a').filter(function(index) { return $(this).text() === "Availability"; }); $(link).hide(); $(link).removeAttr('href');
sumber
Maaf, jika ini sama persis dengan jawaban siapa pun di atas,
$.fn.equalsText = function (text, isCaseSensitive) { return $(this).filter(function () { if (isCaseSensitive) { return $(this).text() === text } else { return $(this).text().toLowerCase() === text.toLowerCase() } }) }
Berikut adalah beberapa output di konsol halaman hasil penelusuran Linkedin.
$("li").equalsText("Next >", false) [<li class="next">…</li>] // Output $("li").equalsText("next >", false) [<li class="next">…</li>] // Output $("li").equalsText("Next >", true) [<li class="next">…</li>] // Output $("li").equalsText("next >", true) [] // Output
Ini memiliki dukungan sensitivitas huruf besar juga dan tidak digunakan
:contains()
Edit (22 Mei 2017): -
$.fn.equalsText = function (textOrRegex, isCaseSensitive) { return $(this).filter(function () { var val = $(this).text() || this.nodeValue if (textOrRegex instanceof RegExp) { return textOrRegex.test(val) } else if (isCaseSensitive) { return val === textOrRegex } else { return val.toLowerCase() === textOrRegex.toLowerCase() } }) }
sumber