Выбрать элемент по точному соответствию его содержимому
Хорошо, мне интересно, есть ли способ сделать :contains() селектор jQuery для выбора элементов только с строкой, которая вводится в
например –
hello
- Селектор атрибутов jQuery для нескольких значений
- jQuery выбирает атрибут с использованием операторов AND и OR
- Выбор индекса jQuery
- Какие селектора CSS3 действительно поддерживают jQuery, например: nth-last-child ()?
- jQuery получить все div, которые не имеют атрибута classа
hello world
$('p:contains("hello")').css('font-weight', 'bold');
Селектор выберет оба элемента p и сделает их полужирным, но я хочу, чтобы он выбирал только первый.
- Изменение CSS-элемента дочернего элемента при зависании родительского элемента
- Как определить, работает ли браузер Chrome с помощью jQuery?
- jQuery hasClass () - проверьте несколько classов
- Как я могу выбрать элемент с несколькими classами в jQuery?
- jQuery mobile - для каждого события прямого трансляционного события должно существовать эквивалентное событие click?
- Как получить выражение селектора jQuery в виде текста?
- полный календарный выбор ячейки на мобильном устройстве?
- jQuery .bind () vs. .on ()
Нет, нет селектора jQuery (или CSS), который делает это.
Вы можете легко использовать filter :
$("p").filter(function() { return $(this).text() === "hello"; }).css("font-weight", "bold");
Это не селектор , но он выполняет эту работу. 🙂
Если вы хотите обрабатывать пробелы до или после «привет», вы можете бросить там $.trim :
return $.trim($(this).text()) === "hello";
Для преждевременных оптимизаторов там, если вам все равно, что он не соответствует
hello
и тому подобное, вы можете избежать вызовов $ и text , используя innerHTML напрямую :
return this.innerHTML === "hello";
… но у вас должно быть много абзацев, чтобы это имело значение, поэтому многие из вас, вероятно, сначала имели бы другие проблемы. 🙂
Попробуйте добавить расширенную псевдофункцию:
$.expr[':'].textEquals = $.expr.createPseudo(function(arg) { return function( elem ) { return $(elem).text().match("^" + arg + "$"); }; });
Тогда вы можете сделать:
$('p:textEquals("Hello World")');
Для достижения этой цели вы можете использовать функцию jQuery filter () .
$("p").filter(function() { // Matches exact string return $(this).text() === "Hello World"; }).css("font-weight", "bold");
Поэтому ответ Аманду в основном работает. Однако, используя это в дикой природе, я столкнулся с некоторыми проблемами, когда вещи, которые я ожидал получить, не нашли. Это было потому, что иногда есть случайное белое пространство, окружающее текст элемента. Я считаю, что если вы ищете «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 только удаляет пробелы до и после искомого текста. Он не удаляет пробелы в середине слов. Я считаю, что это желательно поведение, но вы можете изменить это, если хотите.
Как указано выше, TJ Crowder, функция фильтра делает чудеса. Это не работало для меня в моем конкретном случае. Мне нужно было искать несколько таблиц и их tags 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. } });
Надеюсь, это полезно кому-то!
Я нашел способ, который работает для меня. Он не на 100% точнее, но он исключает все строки, которые содержат больше, чем просто слово, которое я ищу, потому что я проверяю строку, не содержащую отдельные пробелы. Кстати, вам не нужны эти “”. jQuery знает, что вы ищете строку. Убедитесь, что у вас есть только одно место в части: contains (), иначе оно не будет работать.
hello
hello world
$('p:contains(hello):not(:contains( ))').css('font-weight', 'bold');
И да, я знаю, что это не сработает, если у вас есть такие вещи, как
helloworld
Помогите здесь .first ()
$('p:contains("hello")').first().css('font-weight', 'bold');