Pobrany element nie jest liczbą

Czy dobrze to rozumiem kod? Dla każdego elementu z product pobierz wartość atrybutu cena który jest w liście? Zamiast sumy, czyli w tym przypadku 3000, dostaję: NaN$.

        function przeliczKoszyk() {
            var suma = 0;
            var i = 0;
            var przesylka = 0;
            $('#product ul li').each(function () {
                suma = suma + parseInt($(this).attr('cena'));
                i++;
            });
            $('#basketValue').text(suma);
        }

Tutaj fragment z którego chce pobrać wartości dla atrybutu cena.

        <section id="product">
            <ul class="clear">
                <li cena="1000" data-id="1">
                    <a href="#">
                        <img src="http://lorempixel.com/150/100/technics/1/" alt="">
                        <h3>iPad 32gb retina screen</h3>
                        <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
                        
                    </a>
                </li>
                <li cena="2000"  data-id="2">
                    <a href="#">
                        <img src="http://lorempixel.com/150/100/technics/2/" alt="">
                        <h3>Turntable mixer</h3>
                        <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
                    </a>
                </li>
</section> 

dodanie znaczników <code class="javascript"> i <code class="html"> - @furious programming

Niestety prop nie pomaga. Mam przykład z zajęć i tam jest użyta funkcja attr() i tam to działa. Myślę, że problem jest w tej linii:

$('#product #clear ul li').each(function () 

Teraz mi wyświetla cały czas 0. Pytanie jak zrobić atrybut cena czy w jakiś inny sposób, aby później można wyciągnąć te dane?

        <section id="product">
            <ul class="clear">
                <li cena="1000" data-id="1">
                    <a href="#">
                        <img src="http://lorempixel.com/150/100/technics/1/" alt="">
                        <h3>iPad 32gb retina screen</h3>
                        <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
                    </a>
                </li>
                <li cena="2000"  data-id="2">
                    <a href="#">
                        <img src="http://lorempixel.com/150/100/technics/2/" alt="">
                        <h3>Turntable mixer</h3>
                        <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
                    </a>
                </li>

zamiana znacznika <code class="js"> na <code class="javascript"> - @furious programming

Druga wersja wyszła Ci jeszcze gorsza od pierwszej ;)
Najpierw spróbuj sobie troszkę zdebugować i sprawdzić co tam się dzieje.
Wyrzuć sobie na konsolę to co się dzieje w tej funkcji wołanej dla każdego li, np. poprzez: console.log(this); ewentualnie console.log(suma).

Zauważ także, że zmienna suma z funkcji przeliczKoszyk() wcale nie musi być tą której używasz sumując kolejne ceny. Lepiej tą zmienną przypiąć do czegokolwiek, co będzie dostępne niezależnie zarówno z przeliczKoszyk() jak i z tej funkcji wołanej przez jquery.

Ps.
W tym przypadku lepiej zostań przy attr() zamiast prop().