Javascript 无法使用jquery获取内联变换比例

我正在创建一个功能，其中需要从每个li获取内联变换比例值

下面我为你创建了一个演示来帮助我

HTML

提前谢谢

----------更新------------

我认为我的问题不符合我目前面临的问题，因此请检查下面的代码笔以供参考

以下是可能无法签入codepen的可用代码：

HTML

JS

-更新

好的，因为从你之前帖子中的信息来看这并不明显，我只是把我的答案更新放在这里。这应该是你要找的

$(function() {
  $('img').click(function(){
    var arrImages = $('li.image-container');
    var length = arrImages.length;
    var lastElement = $(arrImages).find(':visible:last');
    var i;
    for( i = length -1; i >= 0; i-- ) {
      var obj = $(arrImages[i]);
      if (i < length - 2 && i !== 0) {
        var prevMargin = arrImages.eq(i - 1 ).find('img').css('margin-top');
        var prevScale = arrImages.eq(i - 1 ).find('img').css('transform');
        console.log(prevScale);
      }
    }
  });
});

---

查看或阅读变换矩阵，以便了解如何使用各种x-y变换values@Shubham-我已经更新了我的答案。嗨，谢谢你提供的详细答案，我已经更新了我的代码，请你检查一下，让我知道我遗漏了什么。嗨，大卫，所以看看代码，区别在于我应该使用最后一个方法，而你在选择器中包含了这个方法？如果我遗漏了什么，请告诉我。谢谢@ShubhamTiwari-你所说的最后一种方法是什么意思？主要区别在于，obj已经是一个jquery对象，因此您不必执行$obj.eq…，另一件事是obj是循环中的当前图像，因此要选择上一个图像，您必须从arrImages.eq。。。。您还必须确保存在以前的图像，如果i=length-2&&i！==0 ... 我想我指的是你以前的更新，但这一次确实指出了我所犯的错误。感谢您抽出时间来关注我的问题！成功了，谢谢@ShubhamTiwari-当然，欢迎你。你是说矩阵的计算？也许最好再贴一个问题，我把它删掉了，因为它和你现在的问题太不一样了，与你现在的问题没有任何关系。

$(function(){
   $('div').click(function(){
   var trans=$('div').css('transform');
   console.log(trans);  
  });
});

<ul>
    <li class="image-container">
        <img src="http://a3.mzstatic.com/us/r30/Purple7/v4/2e/71/0f/2e710fc0-54c2-ce6a-3ce6-296cc0fe526e/icon175x175.png" alt="Receipt" style="transform: scale(0.55); margin-top: -100px;">
    </li>
    <li class="image-container">
        <img src="http://a3.mzstatic.com/us/r30/Purple7/v4/2e/71/0f/2e710fc0-54c2-ce6a-3ce6-296cc0fe526e/icon175x175.png" alt="Receipt" style="transform: scale(0.6); margin-top: -80px;">
    </li>
    <li class="image-container">
        <img src="http://a3.mzstatic.com/us/r30/Purple7/v4/2e/71/0f/2e710fc0-54c2-ce6a-3ce6-296cc0fe526e/icon175x175.png" alt="Receipt" style="transform: scale(0.7); margin-top: -40px;">
    </li>
    <li class="image-container">
        <img src="http://a3.mzstatic.com/us/r30/Purple7/v4/2e/71/0f/2e710fc0-54c2-ce6a-3ce6-296cc0fe526e/icon175x175.png" alt="Receipt" style="transform: scale(0.8); margin-top: 1px;">
    </li>
    <li class="image-container">
        <img src="http://a3.mzstatic.com/us/r30/Purple7/v4/2e/71/0f/2e710fc0-54c2-ce6a-3ce6-296cc0fe526e/icon175x175.png" alt="Receipt" style="transform: scale(0.9); margin-top: 50px;">
    </li>
    <li class="image-container">
        <img src="static/images/fileeebox/Receipt.jpg" alt="Receipt" style="transform: scale(1); margin-top: 100px;">
    </li>
    <li class="image-container">
        <img src="static/images/fileeebox/Receipt.jpg" alt="Receipt" style="transform: scale(1.1); margin-top: 200px;">
    </li>
    <li class="image-container" style="display: none;">
        <img src="http://a3.mzstatic.com/us/r30/Purple7/v4/2e/71/0f/2e710fc0-54c2-ce6a-3ce6-296cc0fe526e/icon175x175.png" alt="Receipt" style="transform: scale(1.1); margin-top: 200px;">
    </li>
    <li class="image-container" style="display: none;">
        <img src="http://a3.mzstatic.com/us/r30/Purple7/v4/2e/71/0f/2e710fc0-54c2-ce6a-3ce6-296cc0fe526e/icon175x175.png" alt="Receipt" style="transform: scale(1.2); margin-top: 700px;">
    </li>
    <li class="image-container" style="display: none;">
        <img src="http://a3.mzstatic.com/us/r30/Purple7/v4/2e/71/0f/2e710fc0-54c2-ce6a-3ce6-296cc0fe526e/icon175x175.png" alt="Receipt">
    </li>
</ul>

ul li.image-container img {
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.4);
    transition: all 600ms ease-in-out;
    list-item-style:none;
}
ul li.image-container:last-child img {
    transform: scale(1.2);
    margin-top: 700px;
}
ul li.image-container:nth-last-child(2) img {
    transform: scale(1.1);
    margin-top: 200px;
}
ul li.image-container:nth-last-child(3) img {
    transform: scale(1);
    margin-top: 100px;
}
ul li.image-container:nth-last-child(4) img {
    transform: scale(0.9);
    margin-top: 50px;
}
ul li.image-container:nth-last-child(5) img {
    transform: scale(0.8);
    margin-top: 1px;
}
ul li.image-container:nth-last-child(6) img {
    transform: scale(0.7);
    margin-top: -40px;
}
ul li.image-container:nth-last-child(7) img {
    transform: scale(0.6);
    margin-top: -80px;
}
ul li.image-container:nth-last-child(8) img {
    transform: scale(0.55);
    margin-top: -100px;
}
ul li.image-container:nth-last-child(9) img {
    transform: scale(0.5);
    margin-top: -120px;
}
ul li.image-container:nth-last-child(10) img {
    transform: scale(0.45);
    margin-top: -140px;
}
ul li.image-container:nth-last-child(n+10) img {
    transform: scale(0.4);
    margin-top: -155px;
}

$(function(){
    $('img').click(function(){
        var arrImages=$('li.image-container');
        var length=arrImages.length;
        var lastElement=$(arrImages).find(':visible').last();
        var i;
        for(i=length-1;i>=0;i--){
            var obj=$(arrImages[i]);
            var prevMargin=$(obj).eq(i-1).find('img').css('margin-top');
            var prevScale=$(obj).eq(i-1).find('img').css('transform');
            alert(prevMargin);
            alert(prevScale);
        }
    });
});

$(function() {
  $('img').click(function(){
    var arrImages = $('li.image-container');
    var length = arrImages.length;
    var lastElement = $(arrImages).find(':visible:last');
    var i;
    for( i = length -1; i >= 0; i-- ) {
      var obj = $(arrImages[i]);
      if (i < length - 2 && i !== 0) {
        var prevMargin = arrImages.eq(i - 1 ).find('img').css('margin-top');
        var prevScale = arrImages.eq(i - 1 ).find('img').css('transform');
        console.log(prevScale);
      }
    }
  });
});