jQuery-Проверьте, равно ли содержимое тега sometext, а затем сделайте что-нибудь

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

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

очень удобно.

15
dom dom-traversal javascript jquery jquery-selectors

4 ответов

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

Edit: хотя это также будет соответствовать "blablablabla".

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

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

Edit: на самом деле, я думаю, что решение bazmegakapa более элегантное:

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

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

var searchText = 'blabla';

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

демо jsFiddle

10

вы могли бы потенциально сделать что-то вроде:

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

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

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

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

2

без 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";
    }
}
1