jQuery: öğeyi metne göre bul


308

Birisi bir kimlik veya sınıftan ziyade içeriğine dayalı bir öğe bulmanın mümkün olup olmadığını söyleyebilir mi?

Farklı sınıfları veya kimlikleri olmayan öğeleri bulmaya çalışıyorum. (O zaman o elementin ebeveynini bulmam gerekiyor.)



Yanıtlar:


432

:containsÖğeleri içeriklerine göre almak için seçiciyi kullanabilirsiniz .

Burada demo

$('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
Harika, ama büyük / küçük harfe duyarlıdır. Yine de büyük / küçük harfe duyarlı olmayan bir arama yapabilir miyiz?
Dipu Raj

123
@DipuRaj: Bunun .filteryerine kullanmanız gerekir . $('div').filter(function(){ return $(this).text().toLowerCase() === 'test';})
Rocket Hazmat

5
Evet, lütfen @ RocketHazmat'ın kullandığı appraoch'u kullanın, hepsi 'Kayıt Sözleşmesi' ön ekine sahip 5 öğeniz olduğunu ve her birinin bir sayı soneki olduğunu varsayalım . Sen bitireceğiz hepsini seçerek gerçekte yalnızca metin ile eleman istediğinizde,: 'Kayıt Sözleşme 26' .
Feng Huo

1
Her ne kadar: include büyük / küçük harfe duyarlıdır, bulmak için tam metin dizesini geçtiğim için benim için çalıştı.
Francisco Quintero

1
Durumda kendi Pars boşluk kullanmayı seven başkası yardımcı olur, şu does not iş:$('div:contains( "test" )').css('background-color', 'red');
M Katz

92

JQuery belgelerinde şöyle der:

Eşleşen metin doğrudan seçilen öğenin içinde, o öğenin alt öğelerinden herhangi birinde veya bir kombinasyonunda görünebilir

Bu nedenle, :contains() seçiciyi kullanmanız yeterli değildir , ayrıca aradığınız metnin hedeflediğiniz öğenin doğrudan içeriği olup olmadığını da kontrol etmeniz gerekir :

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
Sadece tam olarak bu problemle karşılaştı. Bu daha yüksek olmalı.
DickieBoy

2
Bu çözüm aşağıdaki senaryoda başarısız olabilir: <li>Hello <a href='#'>World</a>, How Are You. . Burada Howaranırsa durum başarısız olur diye düşünüyorum.
me_digvijay

23

Arkadaşlar, bunun eski olduğunu biliyorum ama hey, hepsinden daha iyi çalıştığını düşündüğüm bir çözüm var. İlk ve en önemlisi, jquery: içerdiği () öğesinin gönderildiği Durum Hassasiyetinin üstesinden gelir:

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()

Umarım yakın gelecekte birileri yardımcı olur.


18

Rocket'in cevabı işe yaramıyor.

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

Burada onun DEMO'sunu değiştirdim ve kök DOM'nun seçildiğini görebilirsiniz.

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

Bunu düzeltmek için koda " : last " seçicisini ekleyin .


Bu, seçici birden çok sonuç döndürdüğünde ve başvurmak için "Kimlik" özelliğine sahip olmadığınız belirli bir öğeye daraltmanız gerektiğinde en iyi sonucu verir.
Tahir Khalid

14

Bence en iyi yol.

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

8

Evet, jQuery containsseçiciyi kullanın .


10
er, hayır yapma: 'içerir:' kesin bir eşleşme yapmaz, sadece iğnenin samanlıkta bulunup bulunmadığı (dolayısıyla adı) ... diğerleri burada söylediği gibi
mike kemirgen

3
Bu bir cevap değil.
lharby

4

Aşağıdaki jQuery, metin içeren ancak DOM ağacının yaprak düğümleri olan alt öğeleri olmayan div düğümlerini seçer.

$('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>


Bu en iyi cevap!
Calciol
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.