要素の値を追加する方法

Question

jqueryで新しいタスクを受け取りました。私は試みるまでコードスニペットを投稿しました。ここで

$(document).on("click", ".add", function (e) { 
 
    e.preventDefault(); 
 
    $.ajax({ 
 
     url: url, 
 
     type: "post", 
 
     data: postdata, 
 
     success: function (data) { 
 
      var count = $('#counts').children('li span').length; 
 
      
 
     } 
 
    }) 
 
});

li{ 
 
    list-style-type: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="main"> 
 
<ul class="top-ul"> 
 
<li> </li> 
 
<li><ul class="counts"> 
 
    <li><span>5</span></li> 
 
    <li><span>6</span></li> 
 
    </ul></li> 
 
<li><ul class="counts"> 
 
    <li><span>8</span></li> 
 
    <li><span>2</span></li> 
 
    </ul></li> 
 
</ul> 
 
</div> 
 

 
<button class="add"> 
 
Add result 
 
</button> 
 
<div> 
 
<p class="result"> 
 
</p> 
 
</div>

私が行うには見当がつかない本当に後。私の質問は

.class要素（ボタンをクリックすると）にすべてのスパン要素の値の数を追加する方法でした。スパン要素の値は動的に変化する可能性があります。

ありがとうございます。

Answer 1

私はあなたが最初にあなたのspan要素でちょうどループの後に0に等しいtotal変数を作成し、あなたのtotalに結果を追加する必要がとにかく...

をあなたのAJAX呼び出しをuderstandない...

$(document).on("click", ".add", function (e) { 
 
    var total = 0; 
 
    $(".counts li span").each(function(){ 
 
     total += parseInt($(this).text()); 
 
    }); 
 
    $(".result").text(total) 
 
});

li{ 
 
    list-style-type: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="main"> 
 
<ul class="top-ul"> 
 
<li> </li> 
 
<li><ul class="counts"> 
 
    <li><span>5</span></li> 
 
    <li><span>6</span></li> 
 
    </ul></li> 
 
<li><ul class="counts"> 
 
    <li><span>8</span></li> 
 
    <li><span>2</span></li> 
 
    </ul></li> 
 
</ul> 
 
</div> 
 

 
<button class="add"> 
 
Add result 
 
</button> 
 
<div> 
 
<p class="result"> 
 
</p> 
 
</div>