Выберите элемент по точному совпадению его содержимого

Question

Выберите элемент по точному совпадению его содержимого

хорошо, интересно, есть ли способ сделать :contains() селектор jQuery для выбора элементов с только строка, которая вводится в

например

<p>hello</p>

<p>hello world</p>



$('p:contains("hello")').css('font-weight', 'bold');

селектор выберет оба p элементы и сделать их жирным шрифтом, но я хочу, чтобы он выбрал только первый.

581 7

jQuery jquery-selectors

7 ответов:

Comments

Ничего не найдено.

T.J. Crowder · Accepted Answer · 2013-03-12 16:48:50

нет, нет селектора 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";
...но вы должны были бы иметь много абзацев, чтобы это имело значение, так много, что у вас, вероятно, будут другие проблемы в первую очередь. : -)

Amadu Bah · Accepted Answer · 2013-08-27 13:06:14

попробуйте добавить функцию расширения псевдо:
$.expr[':'].textEquals = $.expr.createPseudo(function(arg) {
    return function( elem ) {
        return $(elem).text().match("^" + arg + "$");
    };
});
затем вы можете сделать:
$('p:textEquals("Hello World")');

lifetimes · Accepted Answer · 2013-03-12 16:43:11

вы можете использовать jQuery filter () для достижения этой цели.
$("p").filter(function() {
// Matches exact string   
return $(this).text() === "Hello World";
}).css("font-weight", "bold");

bwest87 · Accepted Answer · 2017-05-23 15:10:31

Так что ответ Аманду в основном работает. Однако, используя его в дикой природе, я столкнулся с некоторыми проблемами, где вещи, которые я ожидал бы найти, не были найдены. Это было потому, что иногда есть случайное пустое пространство, окружающее текст элемента. Я считаю, что если вы ищете "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 удаляет только пробелы до и после искомый текст. Он не удаляет пробелы в середине слова. Я считаю, что это желательное поведение, но вы можете изменить это, если хотите.

Greg A · Accepted Answer · 2015-06-03 20:00:46

Как и T. J. Crowder, указанная выше, функция фильтра делает чудеса. Это не работает для меня в моем конкретном случае. Мне нужно было искать несколько таблиц и их соответствующие теги 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.
    }
});
Я надеюсь, что это полезно для кого-то!

rf1234 · Accepted Answer · 2018-02-20 21:55:41

Я нашел способ, который работает для меня. Это не 100% точно, но он устраняет все строки, которые содержат больше, чем просто слово, которое я ищу, потому что я проверяю строку, не содержащую отдельных пробелов тоже. Кстати, вам это не нужно". jQuery знает, что вы ищете строку. Убедитесь, что у вас есть только один пробел в части :contains (), иначе он не будет работать.
hello
hello world
$('p:contains(hello):not(:contains( ))').css('font-weight', 'bold');
и да, я знаю, что это не будет работать, если у вас есть такие вещи, как helloworld

tymeJV · Accepted Answer · 2013-03-12 16:43:37

The .во-первых() поможет здесь
$('p:contains("hello")').first().css('font-weight', 'bold');