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

Question

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

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

HTML

<div style="color:red;transform:scale(1);">Dummy content</div>

JS

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

提前致谢！

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

p>

我认为我的问题无法证明我目前面临的问题，因此请查看以下代码笔以供参考。

http://codepen.io/anon/pen/vOzoWv

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

HTML

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

CSS：

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;
}

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]);
            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);
        }
    });
});

Answer 1

-- 更新

好的，因为这在您之前帖子中的信息中并不明显，所以我只是将我对答案的更新放在这里。这应该是您正在寻找的。​​p>

$(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);
      }
    }
  });
});