jQuery: найти элемент по тексту
может ли кто-нибудь сказать мне, можно ли найти элемент на основе его содержимого, а не id или класс?
Я пытаюсь найти элементы, которые не имеют отдельных классов или идентификаторов. (Тогда мне нужно найти родителя этого элемента.)
6 ответов
можно использовать :contains
селектор для получения элементов на основе их содержимого.
<div>This is a test</div>
<div>Another Div</div>
$('div:contains("test")').css('background-color', 'red');
в документации jQuery говорится:
соответствующий текст может отображаться непосредственно в выбранном элементе, в любой из потомков этого элемента или комбинация
поэтому недостаточно использовать :contains()
селектор, вам также нужно проверить, является ли текст, который вы ищете,прямой содержание элемента, на который вы ориентируетесь, что-то вроде этого:
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;
}
Ребята, я знаю, что это старый, но эй, у меня есть это решение, которое, я думаю, работает лучше всех. В первую очередь преодолевает чувствительность к регистру, что jquery :contains() поставляется с:
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()
надеюсь, что кто-то в ближайшем будущем найдет его полезным.
ответ ракеты не работает.
<div>hhhhhh
<div>This is a test</div>
<div>Another Div</div>
</div>
Я просто изменил его демо здесь и вы можете видеть, что выбран корневой DOM.
$('div:contains("test"):last').css('background-color', 'red');
добавить ":последний" селектор в коде, чтобы исправить это.
лучший способ на мой взгляд.
$.fn.findByContentText = function (text) {
return $(this).contents().filter(function () {
return $(this).text().trim() == text.trim();
});
};