如果孩子有CSS，並使用jQuery獲取子索引，調整父級父母大小

Question

我試圖在孩子身高發生變化時動態調整父母的高度。

有每用z-index風格父母只有一個孩子..

這是我已經試過基礎上做什麼我發現

HTML

<div class="parent"> 
    <div class="child"></div> 
    <div class="child2"></div> 
    <div class="child3"></div> 
</div> 
<br> 

<div class="parent"> 
    <div class="child" style="z-index:1;"></div> 
    <div class="child2"></div> 

</div> 
<br> 

<div class="parent"> 
    <div class="child" ></div> 
    <div class="child2" style="z-index:1;"></div> 

</div> 

JQUERY

$(".parent").each(function() { 

    var divIndex = ; 
    var divHeight = ; 

    if ($('this').children().css('z-index') == '1') 
{ 
    // Get height and index of the single specific element with z-index css 
} 

$('this').resize(); 
    $('this').delegate(); 


}); 

JSFiddle

Answer 1

您的代碼被javascript錯誤所幹擾，更具體地說，使用$（'this'），取出單引號：$（this）;

由於使用了id而不是class，因此大多數CSS不會設計風格。

這裏是一個更新的jsfiddle是糾正錯誤，將讓你在正確的軌道上進行迭代家長子div

http://jsfiddle.net/EgbLk/4/

$('.parent').children().each(
    function(){ 

     var divIndex = null ; 
     var divHeight = null ;   

     if($(this).css('z-index') === '1') { 
     alert('z-index is 1'); 
     } 

     $(this).parent().resize(); 
     $(this).parent().delegate();  
    } 
); 

下面是一些「修正」 CSS：

.parent { 
    width: 100px; 
    padding: 10px; 
    background:#ff0000; 
} 

.child2 { 
    position: absolute; 
    width: auto; 
    left: 0px; 
    right: 0px; 
    height:20px 
} 

.child { 
    position: absolute; 
    width: auto; 
    left: 0px; 
    right: 0px; 
    height:50px 
     z-index:1; 
} 

.child3 { 
    position: absolute; 
    width: auto; 
    left: 0px; 
    right: 0px; 
    height:100px 
} 

Answer 2

我會這樣做：

$('.parent').children().filter(function() { 
     return this.style.zIndex==='1'; 
    }).each(function(index, elem) { 
     var divIndex=$(elem).index(), 
      divHeight=$(elem).css('height'); 
     $(elem).resize(); 
     $(elem).delegate(); 
});​ 

在您的小提琴中，z-index = 1的元素都沒有高度。 不知道調整大小和委託功能是做什麼的，但我認爲它們是你正在使用的某些功能。

要調整父「.parent」元素，以相同的高度，用z-index的元素= 1的動態調整，你可以只是做：

$('.parent').children().filter(function() { 
     return this.style.zIndex==='1'; 
    }).each(function(index, elem) { 
     var divIndex=$(elem).index(), 
      divHeight=$(elem).css('height'); 
     $(elem).on('resize', function() { 
      $(this).closest('.parent').css('height', $(this).height()); 
     }); 
});​