jQuery: temukan elemen dengan teks


308

Adakah yang bisa memberi tahu saya jika mungkin untuk menemukan elemen berdasarkan kontennya daripada oleh id atau kelas ?

Saya mencoba menemukan elemen yang tidak memiliki kelas atau id berbeda. (Maka saya kemudian perlu menemukan orang tua elemen itu.)



Jawaban:


432

Anda dapat menggunakan :containspemilih untuk mendapatkan elemen berdasarkan konten mereka.

Demo di sini

$('div:contains("test")').css('background-color', 'red');
<div>This is a test</div>
<div>Another Div</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>


2
Bagus, tapi sensitif huruf. Apakah ada cara lain yang dapat kita lakukan untuk pencarian kasus yang tidak sensitif?
— Dipu Raj

123
@DipuRaj: Anda harus menggunakannya .filter. $('div').filter(function(){ return $(this).text().toLowerCase() === 'test';})
— Rocket Hazmat

5
Ya, silakan gunakan appraoch @RocketHazmat menggunakan, katakan Anda memiliki 5 elemen semua diawali dengan 'Kontrak Kontrak' dan masing-masing memiliki akhiran angka. Anda akhirnya akan memilih semuanya , padahal kenyataannya Anda hanya menginginkan elemen dengan teks: 'Daftarkan Kontrak 26' .
— Feng Huo

1
Meskipun: berisi case sensitif, itu berfungsi untuk saya karena saya melewati string teks yang tepat untuk ditemukan.
— Francisco Quintero

1
Dalam kasus ini membantu orang lain yang suka menggunakan spasi di parens mereka, berikut ini tidak berfungsi:$('div:contains( "test" )').css('background-color', 'red');
— M Katz

92

Dalam dokumentasi jQuery dikatakan:

Teks yang cocok dapat muncul langsung di dalam elemen yang dipilih, di salah satu keturunan elemen itu, atau kombinasi

Oleh karena itu tidak cukup menggunakan :contains() pemilih , Anda juga perlu memeriksa apakah teks yang Anda cari adalah konten langsung dari elemen yang Anda targetkan, sesuatu seperti itu:

function findElementByText(text) {
    var jSpot = $("b:contains(" + text + ")")
                .filter(function() { return $(this).children().length === 0;})
                .parent();  // because you asked the parent of that element

    return jSpot;
}

3
Baru saja mengalami masalah ini. Ini harus lebih tinggi.
— DickieBoy

2
Solusi ini mungkin gagal dalam skenario berikut: <li>Hello <a href='#'>World</a>, How Are You. . Di sini jika Howsedang dicari kondisinya akan gagal saya pikir.
— me_digvijay

23

Kawan, saya tahu ini sudah tua tapi hei saya sudah solusi ini yang saya pikir bekerja lebih baik dari semua. Pertama dan terpenting mengatasi Sensitivitas Kasus yang jquery: berisi () dikirimkan bersama:

var text = "text";

var search = $( "ul li label" ).filter( function ()
{
    return $( this ).text().toLowerCase().indexOf( text.toLowerCase() ) >= 0;
}).first(); // Returns the first element that matches the text. You can return the last one with .last()

Berharap seseorang dalam waktu dekat merasa terbantu.


18

Jawaban Rocket tidak berhasil.

<div>hhhhhh
<div>This is a test</div>
<div>Another Div</div>
</div>

Saya cukup memodifikasi DEMO- nya di sini dan Anda dapat melihat root DOM dipilih.

$('div:contains("test"):last').css('background-color', 'red');

tambahkan pemilih " : last " dalam kode untuk memperbaikinya.


Ini berfungsi paling baik ketika pemilih mengembalikan beberapa hasil dan Anda perlu mempersempitnya ke elemen tertentu di mana Anda tidak memiliki atribut "Id" untuk referensi.
— Tahir Khalid

14

Cara terbaik menurut saya.

$.fn.findByContentText = function (text) {
    return $(this).contents().filter(function () {
        return $(this).text().trim() == text.trim();
    });
};

8

Ya, gunakan containspemilih jQuery .


10
eh, tidak, jangan: 'mengandung:' tidak melakukan kecocokan yang tepat, hanya apakah jarum itu terkandung (oleh karena itu nama) di tumpukan jerami ... seperti yang orang lain katakan di sini
— mike rodent

3
Ini bukan jawaban.
— lharby

4

JQuery berikut memilih node div yang berisi teks tetapi tidak memiliki anak, yang merupakan node daun dari pohon DOM.

$('div:contains("test"):not(:has(*))').css('background-color', 'red');
<div>div1
<div>This is a test, nested in div1</div>
<div>Nested in div1<div>
</div>
<div>div2 test
<div>This is another test, nested in div2</div>
<div>Nested in div2</div>
</div>
<div>
div3
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>


Ini jawaban terbaik!
— Calciol
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.