如何使用 jQuery 将 div 的点击位置更改为父 div 的中心？答案

【问题标题】：How can I change the position of divs on click to the center of the parent div using jQuery?如何使用 jQuery 将 div 的点击位置更改为父 div 的中心？
【发布时间】：2017-05-28 19:31:39
【问题描述】：

单击链接时，我试图将 div 移动到父 div 的中心。

我目前有 3 个链接，它们对应于 3 个 div。当你点击一个链接时，它对应的 div 会被放大（使用 css 过渡）。到目前为止，这运作良好。正确的链接放大了正确的 div。

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

我希望到目前为止这是有道理的。我找到了 this 小提琴链接（来自关于 SO 的问题），它移动了 div，但它不太正确。

这是我的 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 是迄今为止完整工作示例的链接。

【问题讨论】：

您有浏览器限制吗？这可能是使用 flexbox（排序）和/或转换最简单的方法。
@RobertKoritnik 我没有任何浏览器限制，只要代码在 IE10+ 和其他通用代码中工作；铬、火狐和 Safari。我原来的小提琴链接也不正确，我已经在我的问题中更新了它。
那么我们可以说IE10是最低限制吗？
@RobertKoritnik 是的，这很好。
好的，这样就排除了 flexbox，但允许转换。

标签： javascript jquery html css jquery-selectors

【解决方案1】：

试试这个。

在.test-slider div里面的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>

编辑：下面的 sn-p 是该问题的更好的通用解决方案。

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

【讨论】：

@NeelamKhan :) 很高兴为您提供帮助
@NeelamKhan 这里是上述解决方案 jsfiddle.net/1wqfr7na 的更通用版本。也添加在我的答案中

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：