1

子の高さが変わると、複数の親の高さを動的に変更しようとしています。

z-index スタイルを持つ親ごとに子は 1 つだけです。

これは、私が見つけたものに基づいて私がやろうとしたことです

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>

Jクエリ

$(".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

4

2 に答える 2

1

あなたのコードは JavaScript エラー、より具体的には $('this') の使用でいっぱいでした。

クラスの代わりに ID を使用しているため、ほとんどの 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
}
于 2012-07-05T19:07:16.917 に答える
1

私はこれをします：

$('.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());
        });
});​
于 2012-07-05T19:10:55.940 に答える