用jQuery动态地重新定位元素

Question

我试图让选定元素的对应位置位于相关元素的顶部，但是我想确保“底部”元素低于所选元素而不在其下。如果你看看这个例子，你会明白我的意思。

半工作代码例如：

$('.wrapper-2').on('click', '[class^="unique"]', function(e) { 
 

 
    var selected = '#' + $(this).attr('class'); 
 

 
    $('.wrapper-1>div').each(function() { 
 
    $(this).css({ 
 
     'background-color': 'orange', 
 
     'position': 'relative' 
 
    }); 
 
    }); 
 

 
    console.log($(selected).position()); 
 

 
    $(selected).css({ 
 
    'background-color': 'blue', 
 
    'position': 'absolute', 
 
    'top': '0px' 
 
    }); 
 

 
});

.wrapper { 
 
    font-family: Arial; 
 
    font-size: 12px; 
 
    color: #FFF; 
 
} 
 
.wrapper-1 { 
 
    position: absolute; 
 
    top: 0px; 
 
} 
 
.wrapper-2 { 
 
    margin: 0 auto; 
 
    width: 140px; 
 
} 
 
.wrapper-1 div { 
 
    position: relative; 
 
    width: 120px; 
 
    height: 50px; 
 
    background-color: orange; 
 
    margin: 10px; 
 
} 
 
.wrapper-2 div { 
 
    position: relative; 
 
    text-align: center; 
 
    width: 120px; 
 
    height: 50px; 
 
    background-color: grey; 
 
    margin: 10px; 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="wrapper wrapper-1"> 
 
    <div id="unique1">One</div> 
 
    <div id="unique2">Two</div> 
 
    <div id="unique3">Three</div> 
 
    <div id="unique4">Four</div> 
 
</div> 
 

 
<div class="wrapper wrapper-2"> 
 
    <div class="unique1">- 1 -</div> 
 
    <div class="unique2">- 2 -</div> 
 
    <div class="unique3">- 3 -</div> 
 
    <div class="unique4">- 4 -</div> 
 
</div>

修订FIDDLE THAT WORKS：

Answer 1

一个简单的方法是在容器的顶部添加填充，以填充空间否则会被列表中的第一个元素占据。其他人将坐在其下为前：

$('.wrapper-2').on('click', '[class^="unique"]', function(e) { 
 

 
    var selected = $('#' + $(this).attr('class')); 
 

 
    $('.wrapper-1>div').each(function() { 
 
    $(this).css({ 
 
     'background-color': 'orange', 
 
     'position': 'relative' 
 
    }); 
 
    }); 
 

 
    console.log(selected.position()); 
 

 
    selected.css({ 
 
    'background-color': 'blue', 
 
    'position': 'absolute', 
 
    'top': '0px' 
 
    }); 
 

 
    // ** this is the new bit 
 
    // 
 
    $('.wrapper-1').css('padding-top', '60px'); 
 
});

.wrapper { 
 
    font-family: Arial; 
 
    font-size: 12px; 
 
    color: #FFF; 
 
} 
 
.wrapper-1 { 
 
    position: absolute; 
 
    top: 0px; 
 
} 
 
.wrapper-2 { 
 
    margin: 0 auto; 
 
    width: 140px; 
 
} 
 
.wrapper-1 div { 
 
    position: relative; 
 
    width: 120px; 
 
    height: 50px; 
 
    background-color: orange; 
 
    margin: 10px; 
 
} 
 
.wrapper-2 div { 
 
    position: relative; 
 
    text-align: center; 
 
    width: 120px; 
 
    height: 50px; 
 
    background-color: grey; 
 
    margin: 10px; 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="wrapper wrapper-1"> 
 
    <div id="unique1">One</div> 
 
    <div id="unique2">Two</div> 
 
    <div id="unique3">Three</div> 
 
    <div id="unique4">Four</div> 
 
</div> 
 

 
<div class="wrapper wrapper-2"> 
 
    <div class="unique1">- 1 -</div> 
 
    <div class="unique2">- 2 -</div> 
 
    <div class="unique3">- 3 -</div> 
 
    <div class="unique4">- 4 -</div> 
 
</div>