jquery - jQuery addClass を h1 に

Question

h1 要素内のテキストに基づいて、h1 要素にクラスを追加しようとしています。

var title = $("h1").text();
if (title == "Welcome") {
$("h1").addClass("hide");
}

http://jsfiddle.net/4LjnT/

Answer 1

私はお勧めします：

$('h1').addClass(function(){
    return $(this).text() == 'Welcome' ? 'hide' : '';
});

JS フィドルのデモ。

または、jQuery への不要な呼び出しを減らすには:

$('h1').addClass(function(){
    return (this.textContent || this.innerText) == 'Welcome' ? 'hide' : '';
});

JS フィドルのデモ。

そして、殺すのに数分かかったかもしれません。

Object.prototype.textToClass = function(needle,classToAdd){
    var len = this.length,
        classes = [],
        txt;
    for (var i=0; i<len; i++){
        txt = this[i].textContent || this[i].innerText;
        if (txt == needle){
            classes = this[i].className.split(/\s/);
            classes.push(classToAdd);
            this[i].className = classes.join(' ');
        }
    }
    return this;
};

document.getElementsByTagName('h1').textToClass('Welcome','hide');

JS フィドルのデモ。

参考文献:

• jQuery
  • addClass().
• プレーンな JavaScript:
  • Array.length.
  • Array.join().
  • Array.push().
  • 条件演算子/三項演算子。
  • Element.className.
  • Object.prototype.
  • String.push().

Answer 2

jQuery はこのフィドルに読み込まれません。

また、コードを関数でラップしていないdocument.ready()ため、希望どおりに実行されない可能性があります。右側の「Frameworks & Extensions」ドロップダウンから必ず jQuery を選択してください。また、ブラウザのコンソールを常にチェックして、エラーがあるかどうかを確認することを忘れないでください。いつも私に起こります:)

JS

$(function(){

  var title = $("h1").text();

  if (title === "Welcome") {
    $("h1").addClass("hide");
  }

}); // end ready