Как прибавить все значения атрибутов вместе?

Question

К примеру есть такой HTML код:

<div class=content>
 <ol>Pages List</ol>
  <p class=list views=10>Example - 1</p>
  <p class=list views=4>Example - 2</p>
  <p class=list views=7>Example - 3</p>
</div>

И JS код подобного типа:

(function() {
    'use strict';
    let totalViews = $('p[views]').???;
    if (totalViews > 0) {
        $('div.content ol:first').append('<span style="font-size: 15px;color: rgb(191, 191, 191);">  [' + totalViews + ' Total Views ]</span>');
    } else {
        $('div.content ol:first').append('<span style="font-size: 15px;color: rgb(213, 79, 79);">  [ Unexpected error! ]</span>');
    }
})();

И как при таких условиях сосчитать общее кол-во views?(jQuery не является проблемой как и сторонние библиотеки главное оставьте соответствующие ссылки)

Answer 1

И как при таких условиях сосчитать общее кол-во views?

const lists = document.querySelectorAll('.list');
const viewsCount = [...lists].reduce((acc, el) => {
    return acc + parseInt(el.getAttribute('views'));
}, 0);
console.log(viewsCount); // 21

Answer 2

Если вы собираетесь использовать jQuery, то тогда вот так:

let totalViews = 0

$('p.list[views]').each((_, e) => {
  totalViews +=+ $(e).attr('views')
})

console.log(totalViews)
alert(totalViews)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div class=content>
 <ol>Pages List</ol>
  <p class="list" views="10">Example - 1</p>
  <p class="list" views="4">Example - 2</p>
  <p class="list" views="7">Example - 3</p>
</div>

Если же хотите на обычном JavaScript, то вот тогда:

let totalViews = 0

document.querySelectorAll('p.list[views]').forEach(e => {
  totalViews +=+ e.getAttribute('views')
})

console.log(totalViews)
alert(totalViews)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div class=content>
 <ol>Pages List</ol>
  <p class="list" views="10">Example - 1</p>
  <p class="list" views="4">Example - 2</p>
  <p class="list" views="7">Example - 3</p>
</div>

В дальнейшем старайтесь не использовать кастомные атрибуты без приписки data-, в целом кастомные атрибуты в HTML принято писать так data-your-attribute-name.

БЛОГ НА HUSL

Как прибавить все значения атрибутов вместе?

Ответы (2 шт):