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


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

например

<p>hello</p>
<p>hello world</p>

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

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

7   126   2013-03-12 18:41:40

7 ответов:

нет, нет селектора 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")');

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

Как и 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.
    }
});

Я надеюсь, что это полезно для кого-то!

Я нашел способ, который работает для меня. Это не 100% точно, но он устраняет все строки, которые содержат больше, чем просто слово, которое я ищу, потому что я проверяю строку, не содержащую отдельных пробелов тоже. Кстати, вам это не нужно". jQuery знает, что вы ищете строку. Убедитесь, что у вас есть только один пробел в части :contains (), иначе он не будет работать.

<p>hello</p>
<p>hello world</p>
$('p:contains(hello):not(:contains( ))').css('font-weight', 'bold');

и да, я знаю, что это не будет работать, если у вас есть такие вещи, как <p>helloworld</p>

The .во-первых() поможет здесь

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