每個在jquery後追加

我現在看到我是複製粘貼錯誤的文本/問題，根本沒有意義！對不起！我在我的代碼中發現錯誤。這是一個工作版本：每個在jquery後追加

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title></title> 
<style type="text/css"> 
body{ 
margin:0; 
} 
#gallery{ 
width:100%; 
height:100%; 
position:fixed; 
left:0; 
top:0; 
background:#000; 
opacity:0.9; 
} 
.child{ 
width:auto; 
height:auto; 
position:fixed; 
left:0; 
top:0; 
} 
</style> 
</head> 
<body> 
<div id="click_me">click me</div> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> 
<script> 
$(document).ready(function() { 
$('#click_me').click(function(){ 
$('body').append('<div id="gallery"></div><div class="child" style="width:300px;height:600px;background:#0F0"></div><div class="child" style="width:500px;height:400px;background:#C60"></div><div class="child" style="width:600px;height:200px;background:#390"></div>'); 
    height_of_window = $('#gallery').height(); 
    width_of_window = $('#gallery').width(); 
    max_height = height_of_window - 100; 
    max_width = width_of_window - 100; 
    $('.child').each(function() { 
     var $this = $(this); 
     height_of_child = $this.height(); 
     width_of_child = $this.width(); 
     if (width_of_child >= max_width) { 
     $this.css({ 
      'max-width': max_width + 'px' 
     }) 
     } 
     if (height_of_child >= max_height) { 
     $this.css({ 
      'max-height': max_height + 'px' 
     }) 
     } 
     margin_top = (height_of_window - $this.height())/2; 
     margin_left = (width_of_window - $this.width())/2; 
     $this.css({ 
     'margin-top': margin_top + 'px', 
     'margin-left': margin_left + 'px' 
     }) 
    }); // end click 
    }); // end each 
}); // end document redy 
</script> 
</body> 
</html>

來源

2012-01-04 Hakan

問題是什麼？ – 2012-01-04 10:48:09

將更好地解釋BRB – Hakan 2012-01-04 10:57:59

~~你還沒有告訴我們是什麼問題，但：~~

你說，代碼工作（如果是的話，它不會是可靠的;見下）如果你把標記放在HTML中，但不是如果你使用代碼追加標記。你引用的代碼不會有問題，因爲它清楚地表明，你要追加，然後做了「圖像配」的元素的搜索，但你需要之前，確保你做做追加你運行其他代碼，並且一旦body標籤準備好將其附加到它後，就需要執行這些操作。請確保您的腳本處於最後，正好在關閉</body>標記之後（或之前），或者使用jQuery ready函數（或其shortcut）。

另外：

jQuery的css功能不支持簡寫屬性，雖然他們在某些瀏覽器。每the docs：

不支持速記CSS屬性（例如頁邊距，背景，邊框）。例如，如果要檢索渲染邊距，請使用：$(elem).css('marginTop')和$(elem).css('marginRight')，依此類推。

所以這行：

$(this).css({'margin':margin_top+'px 0 0 '+ margin_left +'px'})

應該

$(this).css({ marginTop: margin_top + 'px', marginLeft: margin_left + 'px', marginRight: "0px", marginBottom: "0px" });

另外，注意每次你做$(this)，它需要多個函數調用和內存分配。最好不要不必要地重複它;雖然它通常是無害的，但它會造成不必要的記憶流失。只需在函數的開始放置var $this = $(this);，然後在整個（或其他任何你想要調用它的地方）使用$this。（其中一個疑問：請記住this在每個函數中都有[潛在]更改，因此如果您設置了事件處理程序，請勿使用外部函數的$this，因爲這意味着要使用事件處理程序的版本。）

來源

2012-01-04 10:49:54

感謝指出「簡寫屬性」只在某些瀏覽器工作！不知道... – Hakan 2012-01-04 11:45:21

你需要用與

$(function() { 

    });

這段代碼，使其運行jQuery代碼之前先加載體。還要確保max_width和max_height的設置與此代碼中的設置不同。

來源

2012-01-04 10:53:46

每個在jquery後追加

回答

相關問題