ページの一番下から動的div

私のデータベースに新しいユーザーが見つかるたびに、新しいdivを挿入します。 CSSを変更すると（クラスから「ボトム」と「アブソリュート」を削除して）、次のコードが動作します。問題は、先頭から始まり、各divが前のものの下に挿入されていることです。 divの部分が画面の左下に表示され、新しいdivが挿入されると上に移動します。基本的には既存のdivをプッシュし、最新のdivはスタックの最下位になります。これを行う方法に関するアイデア？どんな助けもありがとう。ありがとう！ページの一番下から動的div

このコードは新しいdivを挿入しますが、前のコードの上に置きます。

.greyBox { 
    padding:8px; 
    background: grey; 
    margin-bottom:8px; 
    width:200px; 
    height:50px; 
    bottom:0; 
    position:absolute; 
} 
.redBox { 
    padding:8px; 
    background: red; 
    margin-bottom:8px; 
    width:200px; 
    height:25px; 
    bottom:1; 
    position:absolute; 
} 

<p> 
    <button id="after">New User</button> 
    <button id="reset">reset</button> 
</p> 

<div class="greyBox">Users</div> 

$("#after").click(function() { 
    $('.greyBox').after("<div class='redBox'>User 1</div>"); 
}); 

$("#reset").click(function() { 
    location.reload(); 
});

http://jsfiddle.net/ymTtB/

出典

2012-03-03 mkyong

：あなたは本当に.after()greyBoxは、ラッパーを使用して、それを "下" スタイルを適用する必要がありますたい場合

$("#after").click(function() { 
    $('.greyBox').append("<div class='redBox'>User 1</div>"); 
}); 

$("#reset").click(function() { 
    $('.greyBox').children().remove(); 
});

http://jsfiddle.net/Bb6am/

クラス「bottom」の新しいdivコンテナを追加してください http://jsfiddle.net/4np4q/

<html> 
<head> 
<script type="text/javascript" src="jquery.js"></script> 

<style type="text/css"> 
    .bottom{ 
    position: absolute; 
    bottom: 0;  
    } 
    .greyBox{ 
     padding:8px; 
     background: grey; 
     margin-bottom:8px; 
     width:200px; 
     height:50px; 

    } 

    .redBox{ 
     padding:8px; 
     background: red; 
     margin-bottom:8px; 
     width:200px; 
     height:25px; 
    } 
</style> 

</head> 
<body> 

    <p> 
    <button id="after">New User</button> 
    <button id="reset">reset</button> 
    </p> 

    <div class="bottom"> 
    <div class="greyBox">Users</div> 
</div> 
<script type="text/javascript"> 

    $("#after").click(function() { 
     $('.greyBox').after("<div class='redBox'>User 1</div>"); 
    }); 

    $("#reset").click(function() { 
     location.reload(); 
    }); 

</script> 
</body> 
</html>

出典

2012-03-03 15:12:39

チャームのように働いた。ありがとう！ – mkyong

これを例として使用していたので、divが自動的に作成されるため、ボタンを削除する必要があります。パラメータを渡すことができるようにこれを変更するにはどうしたらいいですか？私はそれをクリックする代わりにプログラムから呼び出すことができる別の機能にしたいと思う。 – mkyong

それは.redbox上ごposition: absoluteです：

.greyBox { 
    padding:8px; 
    background: grey; 
    margin-bottom:8px; 
    width:200px; 
    bottom:0; 
    position:absolute; 
} 

.redBox { 
    padding:8px; 
    background: red; 
    margin-bottom:8px; 
    width:200px; 
    height:25px; 
}

また、私はあなたの代わりに後にそれを、.greyBox要素に追加しようとしていたと想像。

.users { 
    width:200px; 
    bottom:0; 
    position:absolute; 
} 
.greyBox { 
    padding:8px; 
    background: grey; 
    margin-bottom:8px; 
} 

<p> 
    <button id="after">New User</button> 
    <button id="reset">reset</button> 
</p> 

$("#after").click(function() { 
    $('.greyBox').after("<div class='redBox'>User 1</div>"); 
}); 

$("#reset").click(function() { 
    $('.users').children().not('.greyBox').remove(); 
});

http://jsfiddle.net/Bb6am/2/

出典

2012-03-03 15:09:26

ページの一番下から動的div

答えて

関連する問題