web-dev-qa-db-ja.com

jQuery-タグのコンテンツが何らかのテキストに等しいかどうかを確認してから、何かを行う

私のコンテンツにこれらの多くが含まれているとしましょうdiv：<cite class="fn">blabla</cite>

すべてのciteタグのcontent（この場合はblabla）をクラスfnでチェックして、「sometext」に等しいかどうかを確認するにはどうすればよいですか。色を赤に変えますか？

とても簡単です。

javascriptjquerydomjquery-selectorsdom-traversal
18
xperator
$('cite.fn:contains(blabla)').css('color', 'red');

編集：「blablablabla」にも一致します。

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

それはもっと正確なはずです。

編集：実際には、bazmegakapaのソリューションはよりエレガントだと思います：

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

すばらしい .filter() メソッドを利用できます。関数をパラメーターとして使用できます。これにより、jQueryコレクションの要素が、テストに合格したもの（関数がtrueを返すもの）に削減されます。その後、残りの要素に対してコマンドを簡単に実行できます。

var searchText = 'blabla';

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

jsFiddleデモ

11
kapa

あなたは潜在的に次のようなことをすることができます：

_$('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() ）

2
isNaN1247

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
Niet the Dark Absol