添加寬度和高度動態div與jquery

我在jquery中插入一個div到一個圖像包裝，根據條件（這沒有重要性），我有這樣的工作方式應該，但問題是，我想要給這個div一個寬度和一個高度，這取決於它以前的兄弟姐妹的圖像。不知道是否可以添加一個寬度和高度，就像我正在做一個在jQuery中創建的div。添加寬度和高度動態div與jquery

<div class="imageWrap imageWrap2"> 
    <img src="images/image1" class="image" /> 
</div>

與代碼標記看起來如下：

<div class="imageWrap imageWrap2"> 
    <img src="images/image1" class="image" /> 
    <div class="extraDiv"></div><-- <-- added with jquery --> 
</div>

jQuery的我加入了（再次條件是不重要的，也不是在配售事項後，追加插入等）

$('.image').each(function(){ 

    if ($(this).closest('.imageWrap').hasClass('imageWrap'){ 

     $(this).after('<div class="extraDiv"></div>'); 

      var imageWidth = $(this).prev().width(); 
      var imageHeight = $(this).prev().height(); 

      $('.extraDiv').width(imageWidth).height(imageHeight);  

    } 

});

有人可以告訴我如何獲得每個圖像的寬度並將其應用於extraDiv。

非常感謝。

來源

2015-07-20 asturnick

試試這個嗎？（有點很難知道它是否會沒有小提琴或plunkr工作）：

$('.image').each(function(){ 
    var imageWidth = $(this).width(); 
    var imageHeight = $(this).height(); 
    $(this).closest('.imageWrap').append('<div class="extraDiv"></div>'); 
    $(this).siblings('.extraDiv').width(imageWidth); 
    $(this).siblings('.extraDiv').height(imageHeight); 
});

OR：

$('.image').each(function(){ 
    var imageWidth = $(this).width(); 
    var imageHeight = $(this).height(); 
    $(this).closest('.imageWrap').append('<div class="extraDiv" style="width:' + imageWidth + 'px;height:' + imageHeight + 'px;"></div>'); 
});

Plunkr

所以第一關你並不真正需要的if語句在那裏，因爲通過應用closest(className)函數，您已經檢查它是否具有該類名稱。由於$('.extraDiv')將以extraDiv作爲其班級更新所有班級，所以我不認爲這就是你想要在這裏做的事情，所以你會遇到if裏最後一條語句的問題。

來源

2015-07-20 21:10:25

這裏的條件實際上是需要的，只是條件其實不是基於類名，這只是一個例子。雖然值在控制檯中用您的代碼正確返回，但它們不會應用於生成的div。有什麼想法嗎？謝謝 – asturnick

我添加了一個plunkr。正如你所看到的，我添加了內聯樣式，並且我試圖通過jquery'css（）'函數來完成，但是由於某種原因，這並不起作用。 –

好吧，我再次更新，所以它更貼近原始代碼。你大多隻需要確保你正確地選擇了'.extraDiv'，並且你正在使用正確的寬度和高度到所選元素 –

添加寬度和高度動態div與jquery

回答

相關問題