0

同じクラスを共有する 6 つの異なるスパンの 6 つの異なる数値に同じ数学的変更を適用しようとしています。この HTML では:

<span class="PageText_L483n">$8.00</span>
<span class="PageText_L483n">$9.00</span>
<span class="PageText_L483n">$10.00</span>
<span class="PageText_L483n">$11.00</span>
<span class="PageText_L483n">$12.00</span>
<span class="PageText_L483n">$13.00</span>

私はもともとこのJSを持っていました:

$(function() {
       var price = parseFloat($('.PageText_L483n').text().substr(1));
       var discount = price * 0.2;
       var newPrice = price - discount;
       var newText = '<div>$' + price + '</div> $' + newPrice;
       $('.PageText_L483n').html(newText);
       $('.PageText_L483n div').css("text-decoration", "line-through");

});

しかし、これは単にすべてのスパンを最初のスパンからの情報に置き換えるだけです。そこで、この JS で配列を使用しようとしました。

$(function() {

       var prices = [];
       for (var i = 0; i < 6; i++) {
           prices[i] = parseFloat($('.PageText_L483n:nth-of-type(i+1)').text().trim().substr(1));
       }
       for (var j = 0; j < 6; j++) {
            var discount = prices[j] * 0.2;
            var newPrice = prices[j] - discount;
            var newText = '<div>$' + prices[j] + '</div> $' + newPrice;
            $('.PageText_L483n').html(newText);
            $('.PageText_L483n div').css("text-decoration", "line-through");
       }

});

しかし、今は何もしません。誰かが私を正しい方向に向けることができますか?

JSFiddle: http://jsfiddle.net/vSePd/

4

3 に答える 3

2

フィドル

jQuery を使用しているため、要素自体を簡単にループできます。

$(function() {

    $('span.PageText_L483n').each(function() {
        var span = $(this);
        var price = parseFloat(span.text().substring(1));
        var discount = price * 0.2;
        var newPrice = price - discount;
        span.html('<div style=text-decoration:line-through>$' + price.toFixed(2) + '</div> $' + newPrice.toFixed(2));
    });

});

なんらかの理由で jQuery を使用したくない場合:

$(function() {
    var spans = document.querySelectorAll('span.PageText_L483n');

    for ( var i = 0, l = spans.length; i < l; ++i ) {
        var price =  parseFloat(spans[i].textContent.substring(1));
        var discount = price * 0.2;
        var newPrice = price - discount;
        spans[i].innerHTML = '<div style=text-decoration:line-through>$' + price.toFixed(2) + '</div> $' + newPrice.toFixed(2);
    }
});
于 2013-08-05T21:27:54.690 に答える
1

kalley が示したように、jQuery は.each()、セレクターに一致する一連の要素に対してアクションを実行するときに使用するのに適した関数です。

$('.PageText_L483n')コードが壊れる理由は、常にすべての を選択するためspanです。したがって、$('.PageText_L483n').html(newText)たとえば、を使用すると、html()関数はセレクターに一致するすべての要素に適用されます。

を使用すると、関数が現在ループしているすべての一致した要素の 1 つの要素を基本的に指す にeach()アクセスできます。これにより、各実行中に個別のアクションを実行できます。$(this)

于 2013-08-05T21:32:44.617 に答える
0 
$(jquery).each();

これを見てください：http://jsfiddle.net/vSePd/3/

そうですか？

于 2013-08-05T21:28:41.553 に答える