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.)
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:
:contains
Öğeleri içeriklerine göre almak için seçiciyi kullanabilirsiniz .
$('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>
.filter
yerine kullanmanız gerekir . $('div').filter(function(){ return $(this).text().toLowerCase() === 'test';})
$('div:contains( "test" )').css('background-color', 'red');
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;
}
<li>Hello <a href='#'>World</a>, How Are You.
. Burada How
aranırsa durum başarısız olur diye düşünüyorum.
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.
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 .
Bence en iyi yol.
$.fn.findByContentText = function (text) {
return $(this).contents().filter(function () {
return $(this).text().trim() == text.trim();
});
};
Evet, jQuery contains
seçiciyi kullanın .
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>