Блог

Главная - Вопросы по программированию - Как добавлять значения из разных классов div с помощью js или jQuery

Как добавлять значения из разных классов div с помощью js или jQuery

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

У меня есть таблица с разными <td> именами классов. Мне нужно добавить / суммировать каждое из них для одного общего значения. Я могу сделать это легко, если у всех них одинаковое имя класса, но я не могу понять, как это сделать с разными классами. Итак, в приведенном ниже примере таблицы мне нужно добавить .price1 .price2 .price3 и отобразить результаты в #result .

HTML:

     <table id="tableOrderTotal" class="table tableTotal">
      <tbody>
        <tr>
         <td>Item1</td>
         <td class="price1">5</td>
        </tr>
        <tr>
         <td>Item2</td>
         <td class="price2">15</td>
        </tr>
        <tr>
         <td>Item3</td>
         <td class="price3">25</td>
        </tr>         
        <tr class="summary">
         <td class="totalOrder">Total:</td>
         <td id="result" class="totalAmount"></td>
        </tr>                                 
     </tbody>
   </table>

Ответ №1:

попробуйте этот селектор, используйте подстановочные знаки

 $("[class^=price]")

код

 var result=0;
$("[class^=price]").each(function(e,i){result =parseInt(i.innerHTML)});
console.log(result) // u get to see the result in console

Ответ №2:

Проще всего было бы просто добавить некоторый атрибут данных или класс, но я предполагаю, что вы не можете этого сделать. Таким образом, существует несколько возможных решений, например, мы можем выполнить селектор по tr и получить все до последнего td tr или выполнить селектор по регулярному выражению. Вот пример кода.

 //solution with selector by tr
var sum=0;
$('tr:not(.summary)').each(function() {

   
    sum =parseInt( $(this).find("td").last().text() );
     
});

$("td#result").text(sum);

//second possibile solution is to do regular expression selector 
//( get every element with class starting by "price")
var sum=0;
$('td[class^=price]').each(function() {

   
    sum =parseInt( $(this).text() );
     
});
$("td#result2").text(sum); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableOrderTotal" class="table tableTotal">
      <tbody>
        <tr>
         <td>Item1</td>
         <td class="price1">5</td>
        </tr>
        <tr>
         <td>Item2</td>
         <td class="price2">15</td>
        </tr>
        <tr>
         <td>Item3</td>
         <td class="price3">25</td>
        </tr>         
        <tr class="summary">
         <td class="totalOrder">Total:</td>
         <td id="result" class="totalAmount"></td>
        </tr>    
        <tr class="summary">
         <td class="totalOrder">Total second solution:</td>
         <td id="result2" class="totalAmount"></td>
        </tr>                               
     </tbody>
   </table>

Комментарии:

1. Ваш 2-й вариант почти работает — однако один из классов td, которые я использую, заполняется вычисленным вычисляемым значением из выпадающего меню выбора, и это значение не включается в вычисление суммы. В принципе, когда выбрано значение из моего меню выбора, у меня есть некоторый js, который умножает выбранное значение на указанное число и заполняет класс .price1 td этим вычисленным значением. Это значение не включается в общую сумму (#результат). Остальные включены просто отлично, но вычисленное значение .price1 — нет. Есть идеи?

2. Я снова играю с вашим кодом варианта № 2 и получаю результат NaN, когда включаю свое вычисленное значение .price1 . Как я могу суммировать свои разные классы, когда еще один из классов заполняется отдельной функцией js? js, который вычисляет .price1, работает отлично — он вычисляет его в зависимости от выбора пользователя из выпадающего списка — и он отлично заполняет .price1 <td> . Однако .price1 не будет суммироваться с использованием предоставленного вами кода. Любая помощь будет принята с благодарностью. Еще раз спасибо.

Ответ №3:

Одним из предложений, более простым, является создание атрибута и некоторых с ним, что-то вроде…

 <td class="price1" to-sum>5</td>
<td class="price2" to-sum>5</td>
<td class="price3" to-sum>5</td>

А затем выберите по атрибуту.

 $(document).ready(function() {
    var total = 0;
    $('td[to-sum]').each(function(item) {
        total  = parseFloat($(this).text());
    })

    $("#result").html(total);
}) 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="tableOrderTotal" class="table tableTotal">
    <tbody>
        <tr>
            <td>Item1</td>
            <td class="price1" to-sum>5</td>
        </tr>
        <tr>
            <td>Item2</td>
            <td class="price2" to-sum>15</td>
        </tr>
        <tr>
            <td>Item3</td>
            <td class="price3" to-sum>25</td>
        </tr>
        <tr class="summary">
            <td class="totalOrder">Total:</td>
            <td id="result" class="totalAmount"></td>
        </tr>
    </tbody>
</table>

Ответ №4:

Вы можете использовать следующий фрагмент кода.

 <script>

    $(function(){
        var sum = 0;
        $('[class^="price"]').each(function(){
            sum = sum   parseInt($(this).html());
        });
        $('[class$="totalAmount"]').html(sum);
    })

</script>

По сути, это получение текста внутри каждого td , который class начинается с префикса price , а затем добавляет их все.

Наконец, он устанавливает значение text your totalAmount td равным сумме, полученной ранее.

Я надеюсь, это поможет.

Ответ №5:

Учитывая, что все ваши <td> значения html являются числами, используя jQuery:

 $(document).ready(function(){
  var total = 0;  
  total  = $('#tableOrderTotal .price1').html();
  total  = $('#tableOrderTotal .price2').html();
  total  = $('#tableOrderTotal .price3').html();
  $("#result").html(total);
})
Метки: