JQuery - проверьте, соответствует ли содержимое тега sometext, а затем что-то делать

Скажем, у меня есть много из них в моем содержании div: <cite class="fn">blabla</cite>

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

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

Ответ 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');;

Ответ 2

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

var searchText = 'blabla';

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

jsFiddle Demo

Ответ 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())

Ответ 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";
    }
}