1

私は助けが必要です。span 要素から単語を取得し、その単語を同じ span 要素にクラスとして割り当てるタスクが割り当てられました。

私はこのコードを書きました:

jQuery(".product span").each(function() {
if(jQuery("this:contains('hat')")) {
    jQuery(this).addClass("hat");
} else if (jQuery("this:contains('sunglasses')")) {
    jQuery(this).addClass("sunglasses");
} else {
    jQuery(this).addClass("vest");
};  
});

ただし、正常に機能しません。クラス「製品」内のすべてのスパン要素にクラス「帽子」を割り当てます。

これを使用する場合:

jQuery(".product span").each(function() {
if(jQuery("this:contains('hat')")) {
    jQuery(this).addClass("hat");
    };
});

それは機能し、「帽子」のクラスを同じスパン要素に割り当てます。このようにすればうまくいきます。しかし、次のような 3 行のコードは避けたいと思います。

jQuery(".product span:contains('hat')").addClass("hat");

if ステートメントと else ステートメント、または可能であれば解析を使用する別の方法でそれが必要です。

その他の注意: jQuery のショートカットは使用していません。他のライブラリと衝突するからです。var $js = jQuery.noConflict(); についても知っています。方法。

Sushanth さん、Kevin さん、Karl さん、すばらしい反応をありがとうございました。両方の答えを解決策として入れられたらいいのに

4

3 に答える 3

0

これは、javascript文字列置換関数を使用して非常に簡単に実現できます。

ここにjsfiddle リンクと以下のコードがあります。

また、自由にコードを書き直して、もう少し読みやすくしました

// Create a closure, where $ is assigned to jQuery, so we dont have to write it
(function ($) {

  $(".product span").each(function() {
    findClass(this,"hat");
    findClass(this,"sunglasses");
  });

  function findClass(el, word) {
    var $el = $(el); //cache element

    $el.text().replace(word, function (match) {
      $el.addClass(match); //add the class to our element
      return match; //return the same word, so it's not replaced
    });
  }

})(window.jQuery);

このreplace関数は 2 つのパラメータを取ります。1 つ目は照合する文字列またはRegExpで、2 つ目はコールバック関数で、一致を置き換える文字列を返します。これを有利に使用できます。

RegExp を使用すると、大文字と小文字を区別しないという利点も得られます。交換するだけ

"hat"/hat/i、完了です!( のi後の/, は大文字と小文字を区別しないことを示します)

それが役に立てば幸い

于 2013-07-24T21:04:38.630 に答える