javascript - 计算多个元素宽度并在 document.ready 上减去它们

Question

我正在尝试计算具有类名 alt 的每个 span 元素的宽度，减去该宽度，然后从该计算中再减去 50px:

<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>  

还有我的 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();

Answer 1

这是你想要做的吗？

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/

请注意，在此答案中，以上内容实际上与 OP 的标记和 CSS 一起使用。然而，对于后代来说，这可能是一个更好的例子(使用 position: relative):

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