jQuery - проверяет, совпадает ли содержимое тега с каким-либо текстом, затем делайте что-то

Question

Допустим, у меня их много в моем контенте div: <cite class="fn">blabla</cite>

Как я могу проверить каждый cite контент тега (в данном случае: blabla) с классом fn, чтобы увидеть, равен ли он "sometext", а затем изменить его цвет на красный? 1010 *

Очень просто.

Answer 1

$('cite.fn:contains(blabla)').css('color', 'red');

Редактировать: хотя это будет соответствовать "blablablabla".

$('cite.fn').each(function () {
    if ($(this).text() == 'blabla') {
        $(this).css('color', 'red');
    }
});

Это должно быть точнее.

Редактировать: На самом деле, я думаю, что решение Базмегакапы более элегантно:

$('cite.fn').filter(function () {
    return $(this).text() == 'blabla';
}).css('color', 'red');;

Answer 2

Вы можете использовать удивительный метод .filter(). В качестве параметра он может принимать функцию, которая уменьшит элементы коллекции jQuery до тех, которые проходят ее тест (для которого функция возвращает true). После этого вы можете легко запускать команды на остальные элементы:

var searchText = 'blabla';

$('cite.fn').filter(function () {
    return $(this).text() === searchText;
}).css('color', 'red');

jsFiddle Demo

Answer 3

Вы можете сделать что-то вроде:

$('cite.fn').each(function() {
  var el = $(this);
  if (el.text() === 'sometext') {
     el.css({ 'color' : 'red' });
  }
});

Это вызывает функцию против каждого cite, который имеет класс fn. Эта функция проверяет, равняется ли текущее значение cite значению sometext.

Если это так, тогда мы изменяем свойство CSS color (text-color) на red.

Примечание В этом примере я использую jQuery, поскольку вы специально пометили свой вопрос jQuery. Проигнорируйте понижение, это было применено прежде, чем я отредактировал опечатку, которую я сделал (el.val() вместо el.text())

Answer 4

без jQuery:

var elms = document.querySelectorAll("cite.fn"), l = elms.length, i;
for( i=0; i<l; i++) {
    if( (elms[i].innerText || elms[i].textContent) == "blabla") {
        elms[i].style.color = "red";
    }
}