Question

我想并排比较两张图片。我试图抓住并存储第一列的高度，以将高度应用于另一列中的相应图像。

现在我只能得到第一个高度或所有高度的组合。

<div id="project">          

    <ul id="new">
        <li> <img src="#" />New 1 </li>
        <li> <img src="#" />New 2 </li>
        <li> <img src="#" />New 3 </li>
        <li> <img src="#" />New 4 </li>
        <li> <img src="#" />New 5 </li>
    </ul>


    <ul id="old">
        <li> <img src="#" />Old 1 </li>
        <li> <img src="#" />Old 2 </li>
        <li> <img src="#" />Old 3 </li>
        <li> <img src="#" />Old 4 </li>
    </ul>
 </div>

Jquery收集（＆＃39; #new li ＆＃39;）的高度并显示图像后的高度（＆＃39; #old li ＆＃39）。我知道我必须将.append()更改为.css('height', theHeight)

$(function () {
    $('#new li').each(function() {
        theHeight = $(this).height();

        $('#old li').each(function() {
            $(this).append(theHeight + ' ');
        });
    });
});

Answer 1

试试这个：

  $(function () {
      $('#new li').each(function (idx, val) {
          theHeight = $(this).height();
          $('#old li').eq(idx).css("height", theHeight);
      });
  });

DEMO

Answer 2

在这里创建一个数组：

var theHeight = new Array();
var i = 0;
$('#new li').each(function() {
    theHeight[i++] = $(this).height();
}

然后循环它：

var i = 0;
$('#old li').each(function() {
     $(this).height(theHeight[i++]);
}

Answer 3

$(function () {
    $('#new li').each(function (i) {
        theHeight = $(this).find('img').height();
        $('#old li:eq(' + i + ') img').height(theHeight);
    });
});

<强> jsFiddle example

此代码循环遍历新列中的每个列表项，获取图像高度，并使用.each()的索引将其应用于旧列中的相应图像。

Answer 4

更新了您的JSFiddle。

$(function () {
    $('#new li').each(function (i) {
        //i is the index number which corresponds to the second set
        $('#old li:eq('+i+')').height( $(this).height() );
    });
});

组合和简化。您对 #new li 权限进行了迭代，然后您只需要将其中的每一个与 #old li 中的相同索引相对应。

Answer 5

提供的答案很好，但这个用例基本上是<table>存在的原因 - 帮助您以类似网格的方式组织事物。

<table>
    <tr>
        <td>
         <img src="#" />New 1
        </td>
        <td>
         <img src="#" />Old 1
        </td>
    </tr>
    <tr>
        <td>
         <img src="#" />New 2
        </td>
        <td>
         <img src="#" />Old 2
        </td>
    </tr>
</table>

对齐两列图像的顶部

5 个答案: