javascript - 我需要在 <li> 标签上与不同的 <ul> 具有相同的高度

Question

我有两个李数相同的。如果第一个中的第二个 li 改变高度，我希望第二个改变第二个位置中 li 的高度。我启动了一个 JQuery 脚本，但不知道如何检查每个 li。

<li data-target="dynamic">
<ul>
    <li>item 1<br>3</li>
    <li>item 2</li>
    <li>item 3</li>
 </ul>
</li>
<li data-target="dynamic">
 <ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
 </ul>
</li>

JavaScript

$('[data-target="dynamic"]').each(function(){
   $(this).find('li').each(function(n){
      $(this).attr('data-position', n);
   });
});

$('[data-position]').each(function(){
  var height = $(this).height();
  console.log($(this),height);     
});

我做了一个jsfiddle:http://jsfiddle.net/6yL6fdt7/

Answer 1

类似这样的事情......我不太确定你想要实现什么，但我希望我猜对了

http://jsfiddle.net/6yL6fdt7/3/

function align(first, second) {
    var f = first.find('li');
    var s = second.find('li');

    for (var i = 0; i < f.length; i++) {
        var first_li = $(f[i]);
        var second_li = $(s[i]);
        if (first_li.height() > second_li.height())
            second_li.height(first_li.height());
        else if (first_li.height() < second_li.height())
            second_li.height(first_li.height());
    }
}

align($('#one'), $('#two'));