如何使用 jQuery 将 div 的位置更改为父级 div 的中心？

Question

我试图在单击 link 时将 div 移动到父 div 的中心。

我目前有3个link，它们对应3个div。当您单击 link 时，它对应的 div 会放大（使用 css 转换）。到目前为止，这运作良好。正确的link放大了正确的div.

div放大后（为了突出）我需要div移动到中心，我需要已经在中心的div取代其他 div 的位置。 这就是我努力实现的目标。我尝试使用 jQuery 的 append、prepend、animate 并使用 closest 但我不确定如何让 div 移动到中心并让中心的 div 移动到它最近的 divs 位置。

我希望到目前为止这是有意义的。我发现 this fiddle link （来自关于 SO 的问题）并且它移动了 divs 但它不太正确。

这是我的 HTML 结构：

<div class="test">
  <div class="test-links">
    <ul>
        <li><a data-target=".ecommerce" href="#">Ecommerce</a></li>
        <li><a data-target=".cloud" href="#">Cloud</a></li>
        <li><a data-target=".amazon" href="#">Amazon</a></li>  
    </ul>
  </div>
  <div class="test-slider">
    <div class="test-slide ecommerce">
      Ecommerce
    </div>
    <div class="test-slide cloud">
      Cloud
    </div>
    <div class="test-slide amazon">
      Amazon
    </div>
  </div>
</div>

这是对应的jQuery:

$(document).ready(function() {
  $(".test-links a").click(function() {
    var $target = $($(this).data('target'));
    $(".test-slide").not($target).removeClass('active');
    $target.addClass('active');
    return false
  });
});

Here 是迄今为止完整工作示例的 link。

Answer 1

试试这个。

在.div里面的元素中找到被点击的元素的索引.test-slider div插入到中间位置.

$(document).ready(function() {
  $(".test-links a").click(function() {
    var $target = $($(this).data('target'));
    $(".test-slide").not($target).removeClass('active');
    $target.addClass('active');
    
    $(".test-slider div").each(function(index,elem)
    {
      if($(elem).text() == $target.text())
      {
        if(index > 1)
        $(elem).insertBefore($(".test-slider div").eq(1));
        if(index < 1)
        $(elem).insertBefore($(".test-slider div").eq(2));
      }
    });
    
    
    
    return false
  });
});

.test {
  float: left;
  width: 100%;
  text-align: center;
}

.test-links {
  float: left;
  width: 100%;
  margin: 30px 0;
}

.test-links ul {
  list-style-type: none;
  float: left;
  width: 100%;
  margin: 0;
}

.test-links ul li {
  display: inline-block;
  float: left;
}

.test-links ul li a {
  display: block;
  padding: 30px;
}

.test-slide {
  float: left;
  width: 33.33333%;
  height: 200px;
  color: #fff;
  transition: all 300ms ease;
  opacity: 0.8;
  position: relative;
  z-index: 0;
}

.ecommerce {
  background: blue;
}

.cloud {
  background: red;
}

.amazon {
  background: grey;
}

.test-slide.active {
  -moz-transform: scale(1.08);
  -ms-transform: scale(1.08);
  -o-transform: scale(1.08);
  -webkit-transform: scale(1.08);
  color: #e67e22;
  opacity: 1;
  transform: scale(1.08);
  position: relative;
  z-index: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">
  <div class="test-links">
    <ul>
      <li><a data-target=".ecommerce" href="#">Ecommerce</a></li>
      <li><a data-target=".cloud" href="#">Cloud</a></li>
      <li><a data-target=".amazon" href="#">Amazon</a></li>
    </ul>
  </div>
  <div class="test-slider">
    <div class="test-slide ecommerce">
      Ecommerce
    </div>
    <div class="test-slide cloud">
      Cloud
    </div>
    <div class="test-slide amazon">
      Amazon
    </div>
  </div>
</div>

编辑：下面的代码片段是针对该问题的更好的通用解决方案。

$(document).ready(function() {
  $(".test-links a").click(function() {
    var $target = $($(this).data('target'));
    $(".test-slide").not($target).removeClass('active');
    $target.addClass('active');
    
    var len = $(".test-slider div").length;
    
    var mid = (Math.floor(len/2));
    
    $(".test-slider div").each(function(index,elem)
    {
      if($(elem).text() == $target.text())
      {
        if(index > mid)
        $(elem).insertBefore($(".test-slider div").eq(mid));
        if(index < mid)
        $(elem).insertBefore($(".test-slider div").eq(mid+1));
      }
    });
    
    
    
    return false
  });
});

.test {
  float: left;
  width: 100%;
  text-align: center;
}

.test-links {
  float: left;
  width: 100%;
  margin: 30px 0;
}

.test-links ul {
  list-style-type: none;
  float: left;
  width: 100%;
  margin: 0;
}

.test-links ul li {
  display: inline-block;
  float: left;
}

.test-links ul li a {
  display: block;
  padding: 30px;
}

.test-slide {
  float: left;
  width: 20%;
  height: 200px;
  color: #fff;
  transition: all 300ms ease;
  opacity: 0.8;
  position: relative;
  z-index: 0;
}

.ecommerce {
  background: blue;
}

.cloud {
  background: red;
}

.amazon {
  background: grey;
}

.paypal {
  background: yellow;
}

.cisco {
  background: green;
}

.test-slide.active {
  -moz-transform: scale(1.08);
  -ms-transform: scale(1.08);
  -o-transform: scale(1.08);
  -webkit-transform: scale(1.08);
  color: #e67e22;
  opacity: 1;
  transform: scale(1.08);
  position: relative;
  z-index: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">
  <div class="test-links">
    <ul>
      <li><a data-target=".ecommerce" href="#">Ecommerce</a></li>
      <li><a data-target=".cloud" href="#">Cloud</a></li>
      <li><a data-target=".amazon" href="#">Amazon</a></li>
       <li><a data-target=".paypal" href="#">Paypal</a></li>
        <li><a data-target=".cisco" href="#">Cisco</a></li>
    </ul>
  </div>
  <div class="test-slider">
    <div class="test-slide ecommerce">
      Ecommerce
    </div>
    <div class="test-slide cloud">
      Cloud
    </div>
    <div class="test-slide amazon">
      Amazon
    </div>
    <div class="test-slide paypal">
      Paypal
    </div>
    <div class="test-slide cisco">
      Cisco
    </div>
  </div>
</div>

Answer 2

使用 insertAfter() 的解决方案 - 这移动 div 位置并将它放在第一个 div.

参见下面的演示：

$(document).ready(function() {
  $(".test-links a").click(function() {
    var $target = $($(this).data('target'));
    $(".test-slide").not($target).removeClass('active');
    
    if ($target.is('.test-slider .test-slide:first-child'))
      $target.addClass('active').insertAfter('.test-slider .test-slide:nth-child(2)');
    else
      $target.addClass('active').insertAfter('.test-slider .test-slide:first-child');
    return false
  });
});

.test {
  float: left;
  width: 100%;
  text-align: center;
}
.test-links {
  float: left;
  width: 100%;
  margin: 30px 0;
}
.test-links ul {
  list-style-type: none;
  float: left;
  width: 100%;
  margin: 0;
}
.test-links ul li {
  display: inline-block;
  float: left;
}
.test-links ul li a {
  display: block;
  padding: 30px;
}
.test-slide {
  float: left;
  width: 33.33333%;
  height: 200px;
  color: #fff;
  transition: all 300ms ease;
  opacity: 0.8;
  position: relative;
  z-index: 0;
}
.ecommerce {
  background: blue;
}
.cloud {
  background: red;
}
.amazon {
  background: grey;
}
.test-slide.active {
  -moz-transform: scale(1.08);
  -ms-transform: scale(1.08);
  -o-transform: scale(1.08);
  -webkit-transform: scale(1.08);
  color: #e67e22;
  opacity: 1;
  transform: scale(1.08);
  position: relative;
  z-index: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="test">
  <div class="test-links">
    <ul>
      <li><a data-target=".ecommerce" href="#">Ecommerce</a>
      </li>
      <li><a data-target=".cloud" href="#">Cloud</a>
      </li>
      <li><a data-target=".amazon" href="#">Amazon</a>
      </li>
    </ul>
  </div>
  <div class="test-slider">
    <div class="test-slide ecommerce">
      Ecommerce
    </div>
    <div class="test-slide cloud">
      Cloud
    </div>
    <div class="test-slide amazon">
      Amazon
    </div>
  </div>
</div>

Answer 3

可以试试这个代码。我刚刚在 jsfiddle 上修改了你的代码：看这里：https://jsfiddle.net/6v37ue4y/10/

$(document).ready(function() {
  $(".test-links a").click(function() {
    var $target = $($(this).data('target'));
    $(".test-slide").not($target).removeClass('active');
    $target.addClass('active');
    return false
  });
  $('.test-slider div').click(function(e){
     var indx = $( ".test-slider div" ).index( $(this) ) ;
    // alert(indx);
     if(indx == 0){
       $(this).next('div').after($(this));
     } else if(indx == 2){
         $(this).prev('div').before($(this));
     } else {
     
     }
  });
});

.test {
  float: left;
  width: 100%;
  text-align: center;
}

.test-links {
  float: left;
  width: 100%;
  margin: 30px 0;
}

.test-links ul {
  list-style-type: none;
  float: left;
  width: 100%;
  margin: 0;
}

.test-links ul li {
  display: inline-block;
  float: left;
}

.test-links ul li a {
  display: block;
  padding: 30px;
}

.test-slide {
  float: left;
  width: 33.33333%;
  height: 200px;
  color: #fff;
  transition: all 300ms ease;
  opacity: 0.8;
  position: relative;
  z-index: 0;
}

.ecommerce {
  background: blue;
}

.cloud {
  background: red;
}

.amazon {
  background: grey;
}

.test-slide.active {
  -moz-transform: scale(1.08);
  -ms-transform: scale(1.08);
  -o-transform: scale(1.08);
  -webkit-transform: scale(1.08);
  color: #e67e22;
  opacity: 1;
  transform: scale(1.08);
  position: relative;
  z-index: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="test">
  <div class="test-links">
    <ul>
      <li><a data-target=".ecommerce" href="#">Ecommerce</a></li>
      <li><a data-target=".cloud" href="#">Cloud</a></li>
      <li><a data-target=".amazon" href="#">Amazon</a></li>
    </ul>
  </div>
  <div class="test-slider">
    <div class="test-slide ecommerce">
      Ecommerce
    </div>
    <div class="test-slide cloud">
      Cloud
    </div>
    <div class="test-slide amazon">
      Amazon
    </div>
  </div>
</div>

如何使用 jQuery 将 div 的位置更改为父级 div 的中心？

How can I change the position of divs on click to the center of the parent div using jQuery?

html

javascript

css

jquery

jquery-selectors