How to calculate width and margin using jquery

Question

I made a small function to calculate width along with margin of li but it is giving me error.

<head>

<style>

.bill ul{ list-style:none}

.bill ul li{ float:left; width:94px; margin-right:18px}

.bill ul li:last-child { margin-right:0}

</style>

<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">

$(function (){

    $('.bill').find('li').each(function (){
            var jn += parseInt($(this).css('margin-right')) + $(this).width();
        })


        alert(jn)


    })


</script>

</head>

<body>

<div class="bill">
<ul>
<li>aaa</li>
<li>aaa</li>
<li>aaa</li>
<li>aaa</li>
<li>aaa</li>

</ul>
</div>

</body>

it is giving me syntax error "var jn += parseInt($(this).css('margin-right')) + $(this).width();" here — Jitender
– Jitender, Commented Aug 16, 2012 at 8:55

Anthony Grist · Accepted Answer · 2012-08-16 08:54:45Z

3

You're declaring the jn variable using the var keyword inside the anonymous function passed to .each(), meaning that the variable will be scoped inside of that function and not exist outside of it.

Trying to call alert(jn) will likely result in undefined being alerted, because the jn variable isn't visible in the scope of that statement.

In addition, declaring a variable and using the += operator is invalid syntax. The variable has to exist in order for you to add to its value. Try the following:

$(function (){
    var jn = 0;

    $('.bill').find('li').each(function (){
        jn += parseInt($(this).css('margin-right')) + $(this).width();
    });

    alert(jn);
});

answered Aug 16, 2012 at 8:54

Anthony Grist

38.4k8 gold badges64 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

derki · Accepted Answer · 2012-08-16 08:53:12Z

0

better way to do this is to use jQuery position() http://api.jquery.com/position/

answered Aug 16, 2012 at 8:53

derki

6183 silver badges7 bronze badges

Collectives™ on Stack Overflow

How to calculate width and margin using jquery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related