我需要同样的身高 <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

在这里，你去： 演示

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上调整第一个li

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/