Question

我有两个相同数量的李。如果第二个li从第一个改变高度，我希望第二个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

在这里： DEMO

var highest='';
$('[data-target="dynamic"]').each(function(){

    //find the highest li
    $(this).find('li').each(function(n){
        if(highest==''){
            highest=$(this);
        }
        else{
            if(highest.height()<$(this).height()){
                highest=$(this);
            }
        }
    });

    //set all the lis hight as the highest one
    $(this).find('li').height(highest.height());
});

Answer 2

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

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'));

Answer 3

这是一个更通用的解决方案（不仅适用于2 li s）

var heights = [];
$('[data-target="dynamic"]').each(function(){
   $(this).find('li').each(function(n){
      $(this).attr('data-position', n);
      if(heights[n] == undefined)
        heights[n] = $(this).height();
      else if(heights[n] < $(this).height())
        heights[n] = $(this).height();
   });
});
$('li[data-position]').each(function(){
    var n = parseInt($(this).attr('data-position'));
    $(this).height(heights[n]);
});

Answer 4

假设<ul class="fixed">和<ul class="dynamic">（当然两者都有相同数量的<li>）

var fixed = $('.fixed > ul > li');
var dynamic = $('.dynamic > ul > li');

fixed.each(function(index, element) {
    dynamic[index].style.height = element.offsetHeight + 'px';
});

演示：http://jsfiddle.net/6yL6fdt7/7/

Answer 5

要匹配匹配li的高度（就像你问的那样）你可以做以下事情，所以如果第一个li有更大的高度，那么只调整第二个ul的第一个

var biggerH = $("li[data-target=dynamic] ul li:first-child").height();
var nth = 0;
$("li[data-target=dynamic] ul li").each(function(i){
    $("li[data-target=dynamic] ul li").each(function(k){
        if(biggerH < $(this).height()){
            biggerH = $(this).height();
            nth = k;
        }
    });
});
$("li[data-target=dynamic] ul li:nth-child("+nth+")").height(biggerH);

样本 http://jsfiddle.net/6yL6fdt7/5/

我需要来自不同<ul> </ul> </li>的<li>标签的相同高度

5 个答案: