éléments div Réglage d'avoir des positions absolues avec jquery

Question

je le code HTML suivant

<div id="to-sort"> 
    <div class="block" data-id="1">aaaaa</div> 
    <div class="block" data-id="2">bbbbb</div> 
    <div class="block" data-id="3">ccccc</div> 
    <div class="block" data-id="4">ddddd</div> 
    <div class="block" data-id="5">eeeee</div> 
    <div class="block" data-id="6">fffff</div> 
    <div class="block" data-id="7">ggggg</div> 
    <div class="block" data-id="8">hhhhh</div> 
    <div class="block" data-id="9">iiiii</div> 
</div> 

Je veux itérer chaque .block et définir la position absolue. Je donne les résultats suivants

// Iterate through .blocks 
$('.block').each(function(i,v){ 
    var cssobj = { position: 'absolute', 
        top: $(this).position().top, 
        left: $(this).position().left }; 

    console.log(cssobj); 
    //$(this).css(cssobj); 
}); 

Si la ligne

//$(this).css(cssobj); 

est mis en commentaire - console.log() montre les positions correctes. Si je décommenter

$(this).css(cssobj); 

alors ils sont tous à la position de la première .block (x: 0, y: 0)

Je suis sûr que cela a à voir avec la portée mais j'ai essayé une fermeture et Je ne pouvais pas le faire fonctionner. Comment puis-je définir chaque div pour être une position absolue?

Merci

Answer 1

jQuery .position() obtient le décalage par rapport au parent offset: http://api.jquery.com/position/

jQuery .offset() est ce que vous recherchez.

Aussi après que le premier se soit mis à absolute le prochain monte à sa place.

à la place le mettre en deux passes:

$('.block').each(function(){ 
    var cssobj = {top: $(this).offset().top, left: $(this).offset().left }; 
    $(this).css(cssobj); 
}).each(function(){ $(this).css('position', 'absolute')}); 

EDIT: -

comme alternative, vous pouvez le faire dans l'ordre inverse et qui fonctionnera aussi:

$.fn.reverse = [].reverse; 
$('.block').reverse().each(function(i,v){ 
    var cssobj = {position: 'absolute', 
        top: $(this).offset().top, 
        left: $(this).offset().left }; 

    console.log(cssobj); 
    $(this).css(cssobj); 
}); 

.reverse() provient de JQuery .each() backwards

Answer 2

Le code suivant me semble erroné

Lorsque vous voulez positionner absolu, vous devez obtenir les valeurs de gauche et de haut et les positionner: absolu et donner haut et gauche.

Ici, vous obtenez la position du même objet en haut et à gauche, comment ces objets sont-ils positionnés? sont dans le flux de documents ou pas, obtenir les valeurs de décalage de l'élément de référence et de calculer vos valeurs supérieures et à gauche.

$('.block').each(function(i,v){ 
    var cssobj = { position: 'absolute', 
        top: $(this).position().top, 
        left: $(this).position().left }; 

    console.log(cssobj); 
    //$(this).css(cssobj); 
});