CODEWITHSUNDEEP
javascriptjquery
Yahreen
Yahreen

Reputation: 1669

Calculating mutiple element widths & subtracting them on document.ready

I'm trying to calculate the widths of each span element with class name alt, subtract that width and then subtract a further 50px from that calculation:

<ul class="items">
    <li class="product1 alt"><a href=""><span>Televisions</span></a></li>
    <li class="product2"><a href=""><span>MP3 Players</span></a></li>
    <li class="product3 alt"><a href=""><span>Speakers</span></a></li>
</ul>

And my jQuery:

function moveIt() {
    var diamond = $("#ir-content li.alt a span").width();
    $("#ir-content li.alt a span").css("left","-" + theMath - "50px");
    alert(theMath);
}

moveIt();

Upvotes: 3

Views: 436

Answers (1)

Jared Farrish
Jared Farrish

Reputation: 49238

Is this what you're trying to do?

function moveIt(){
    $("#ir-content li.alt a span").each(function(){
        $(this).css("left", ((0 - $(this).width()) - 50) + "px")
    });
}

$(document).ready(function(){
    moveIt();
});

http://jsfiddle.net/rxw3B/8/

Note, in this answer, the above actually worked with the OP's markup and css. However, this is probably a better example for posterity (using position: relative):

http://jsfiddle.net/rxw3B/9/

Upvotes: 2

Related Questions