Хорошо, мне интересно, есть ли способ сделать селектор :contains() jQuery для выбора элементов с только строкой, введенной в
например -
<p>hello</p>
<p>hello world</p>
$('p:contains("hello")').css('font-weight', 'bold');
Селектор выберет оба элемента p и сделает их полужирным, но я хочу, чтобы он выбирал только первый.
Нет, нет селектора jQuery (или CSS), который делает это.
Вы можете легко использовать filter:
$("p").filter(function() {
return $(this).text() === "hello";
}).css("font-weight", "bold");
Это не селектор, но он выполняет эту работу.: -)
Если вы хотите обрабатывать пробелы до или после "привет", вы можете добавить $.trim:
return $.trim($(this).text()) === "hello";
Для преждевременных оптимизаторов там, если вам все равно, что он не соответствует <p><span>hello</span></p> и тому подобное, вы можете избежать вызовов $ и text с помощью innerHTML напрямую:
return this.innerHTML === "hello";
... но вам нужно иметь лот абзацев, чтобы это имело значение, поэтому многие из вас, вероятно, сначала столкнулись бы с другими проблемами.: -)
Попробуйте добавить псевдослучайную функцию:
$.expr[':'].textEquals = $.expr.createPseudo(function(arg) {
return function( elem ) {
return $(elem).text().match("^" + arg + "$");
};
});
Затем вы можете сделать:
$('p:textEquals("Hello World")');
Итак, ответ Аманду в основном работает. Однако, используя это в дикой природе, я столкнулся с некоторыми проблемами, когда вещи, которые я ожидал получить, не нашли. Это было потому, что иногда есть случайное белое пространство, окружающее текст элемента. Я считаю, что если вы ищете "Hello World", вы все равно хотите, чтобы он соответствовал "Hello World" или даже "Hello World\n". Таким образом, я просто добавил метод "trim()" к функции, которая удаляет окружающие пробелы, и она начала работать лучше.
В частности...
$.expr[':'].textEquals = function(el, i, m) {
var searchText = m[3];
var match = $(el).text().trim().match("^" + searchText + "$")
return match && match.length > 0;
}
Кроме того, обратите внимание: этот ответ очень похож на Выберите ссылку по тексту (точное совпадение)
И вторичное примечание... trim удаляет только пробелы до и после искомого текста. Он не удаляет пробелы в середине слов. Я считаю, что это желательно поведение, но вы можете изменить это, если хотите.
Вы можете использовать функцию jQuery filter() для достижения этой цели.
$("p").filter(function() {
// Matches exact string
return $(this).text() === "Hello World";
}).css("font-weight", "bold");
Я нашел способ, который работает для меня. Это не на 100% точно, но исключает все строки, которые содержат больше, чем просто слово, которое я ищу, потому что я проверяю строку, не содержащую также отдельных пробелов. Кстати, вам не нужны эти "". JQuery знает, что вы ищете строку. Убедитесь, что у вас есть только один пробел в части: contains(), иначе он не будет работать.
<p>hello</p>
<p>hello world</p>
$('p:contains(hello):not(:contains( ))').css('font-weight', 'bold');
И да, я знаю, что это не сработает, если у вас есть что-то вроде <p>helloworld</p>
Подобно T.J. Кроудер заявил выше, функция фильтра делает чудеса. Это не работало для меня в моем конкретном случае. Мне нужно было искать несколько таблиц и их теги td внутри div (в этом случае диалог jQuery).
$("#MyJqueryDialog table tr td").filter(function () {
// The following implies that there is some text inside the td tag.
if ($.trim($(this).text()) == "Hello World!") {
// Perform specific task.
}
});
Надеюсь, это кому-то поможет!
Однострочник, который работает с альтернативными библиотеками для jQuery:
$('p').filter((i, p) => $(p).text().trim() === "hello").css('font-weight', 'bold');
И это эквивалент селектора jQuery a:contains("pattern"):
var res = $('a').filter((i, a) => $(a).text().match(/pattern/));
Помогает здесь .first()
$('p:contains("hello")').first().css('font-weight', 'bold');