2

私はjavascriptに不慣れで、子div内の値の範囲に基づいて、親divにクラスを追加しようとしています（Metafizzy Isotopeソートプラグインを利用できるように）。

HTMLコードは次のとおりです。

<div class="product-list">
    <div class="hidden-price">Number Here</div>
</div>
<div class="product-list">
    <div class="hidden-price">Number Here</div>
</div>
<div class="product-list">
    <div class="hidden-price">Number Here</div>
</div>

jQuery関数は次のとおりです。

$('.hidden-price').each(function() {
if(this.text() < 5000) {
    $(this).closest('.product-list').addClass('Under5k');
}
else if (this.text() > 4999 && this.text() < 10000) {
    $(this).closest('.product-list').addClass('Under10k');
}
else {
    $(this).closest('.product-list').addClass('Over10k');
}
});

jsfiddleへのリンクは次のとおりです。http：//jsfiddle.net/jeremyccrane/gwYPw/

ありがとう！

アップデート：

jsFiddleでクラスを誤って大文字にしました。それは捕らえられて更新されました、そして以下の正解。

4

6 に答える 6

3

これtext()はjQueryメソッドであるため、jQueryオブジェクトに適用する必要があります。
したがって、の代わりにthis.text()、を使用する必要があります$(this).text()。

この関数を使用してそれを達成することができます（少しクリーンなバージョン：P）：

$('.hidden-price').each( function() {
    var size = $(this).text();
    if (size < 5000) {
        $(this).parent('.product-list').addClass('Under5k');
    } else if (size < 10000) {
        $(this).parent('.product-list').addClass('Under10k');
    } else {
        $(this).parent('.product-list').addClass('Over10k');
    }
});

フィドル

于 2013-01-11T06:09:06.990 に答える
2

更新されて機能するJsFiddleコード

作業コード 

$('.hidden-price').each(function() {
    if($(this).text() < 5000) {
                    $(this).parent('div').addClass('under5k');
                }
                else if ($(this).text() > 4999 && $(this).text() < 10000) {
                    $(this).parent('div').addClass('under10k');
                }
                else {
                    $(this).parent('div').addClass('over10k');
                }
});

コードの変更

  1. 関数を最も近いものではなく親に変更する
  2. 小文字のクラス名「over10k」
  3. 「this.text（）」を「$（this）.text（）」に変更します
于 2013-01-11T06:05:38.747 に答える
0

あなたはこれを行うことができます ：

$('.hidden-price').each(function() {
if(this.text() < 5000) {
    $(this).parents('div:first').addClass('Under5k');
}
else if (this.text() > 4999 && this.text() < 10000) {
    $(this).parents('div:first').addClass('Under10k');
}
else {
    $(this).parents('div:first').addClass('Over10k');
}
});
于 2013-01-11T06:05:55.947 に答える
0

.text()実際にはそれほど遠くはありませんでした。それがjqueryメソッドであることを覚えておく必要があります。これにアクセスするには、（ではなく） jqueryオブジェクトthisにアタッチする必要があります。以下のコードは私にとってはうまく機能します：$(this).etcthis.etc

$('.hidden-price').each(function() {
  if($(this).text() < 5000) {
          $(this).closest('.product-list').addClass('Under5k');
        }
        else if ($(this).text() > 4999 && $(this).text() < 10000) {
          $(this).closest('.product-list').addClass('Under10k');
        }
        else {
          $(this).closest('.product-list').addClass('Over10k');
        }
});

デモ

于 2013-01-11T06:12:07.410 に答える
0

parseあなたはテキストをする必要がありますintそしてあなたは値を比較することができます：

$('.hidden-price').each(function () {
   if (parseInt($(this).text()) < 5000) {
        $(this).closest('.product-list').addClass('under5k');
   } else if (parseInt($(this).text()) > 4999 && parseInt($(this).text()) < 10000) {
        $(this).closest('.product-list').addClass('under10k');
   } else {
        $(this).closest('.product-list').addClass('over10k');
   }
});

ここでフィドルをチェックアウトしてください：http：//jsfiddle.net/gwYPw/15/

あなたjsはほぼ正しいですが、修正する必要があるのは1つだけです。それは、次のとおりです。

に変更thisし$(this)、class initials are started with lowercase alphas

$('.hidden-price').each(function() {
    if($(this).text() < 5000) {
          $(this).closest('.product-list').addClass('under5k');
         //^^^^^^------------------------------------^----------hope you get it.
    } else if ($(this).text() > 4999 && $(this).text() < 10000) {
         $(this).closest('.product-list').addClass('under10k');
    } else {
         $(this).closest('.product-list').addClass('over10k');
    }
});
于 2013-01-11T06:12:33.813 に答える
0

おそらく、これを考える簡単な方法は、.product-list要素にクラスを追加することから始めて、内部の内容に基づいて追加するクラスを決定することです。

$(".product-list").addClass(function () {
  var val = $(this).find(".hidden-price").text();
  if (val < 5000) {
    return "Under5k"
  }
  if (val < 10000) {
    return "Under10k"
  }
  return "Over10k";
});
于 2013-01-11T06:24:18.150 に答える