Question

我有一个元素数组，它们有标签class ='element'。如何在加载时动态设置每个元素的高度？当我尝试设置

时

$('.element').css('height',sizeOfContent+'px');

它会改变每个.element的高度

Answer 1

根据您的有限标记逐字地提出您的问题：

jsFiddle DEMO

HTML

<div id="box1" class="element"></div>
<div id="box2" class="element"></div>
<div id="box3" class="element"></div>

CSS

.element {
  width: 50px;
  height: 50px;
  float: left;
  margin: 20px;
  border: 3px dashed black;
}

#box1 {
  background-color: red;
}

#box2 {
  background-color: blue;
}

#box3 {
  background-color: green;
}

JS

$(document).ready(function() {

    // Grab all elements on the page with classname '.element'
    var myElements = $('.element');

    // These are the sizes we need to change dynamically.
    // As seen in jsFiddle CSS panel, the original height for the above classname is 50px;
    var sizeOfContent = [ "100", "200", "300"];

    // Here, we run a .each() iteration and use the zero indexed value to match the corrisponding height as provided in variable sizeOfContent.
    $(myElements).each(function(index) {

        // Activate the console.log to view results in the browers console.
        //console.log( this );

        // jQuery css will automatically use pixle value when not specified
        $(this).css('height', sizeOfContent[index]);

    });

});

Answer 2

我认为这可能是你想做的事情？将每个.element设置为特定高度？ sizOfContent将以这种方式为每个元素设置，你没有提供你的设置sizOfContent的代码 - 所以我把它放在这里的评论中

$.each('.element' , function(){
   var sizeOfContent = // dynamically set sizOfContent
// maybe something like this..
// var sizOfContent = $(this).parent().height();
// ** you wouldn't need an each loop just set to parents height, but you see how it can be dynamically set    
   $(this).css('height',sizeOfContent+'px');
});

Answer 3

问题是$('.element')正在捕获该类的所有元素。这就是它的作用。您需要一个唯一的标识符，例如$('#element1')但是因为你没有告诉我们关于如何创建这些元素的任何内容，sizeOfContent是什么或者它是如何派生的，所以在代码中提供解决方案是不可能的，所以这里是单词。

我只能假设你正在迭代你提到的数组，所以

如果您正在创建对象并附加到页面，请将.css('height',sizeOfContent+'px');添加到jQuery链中，其中将存在.appendTo('body')之类的内容，或者为每个链接提供一个ID并使用$('#element' + i).css('height',sizeOfContent+'px'); < / p>

$.each(thearray, function(i,data){ // or perhaps for (i in thearray) {
    var sizeOfContent= some formula;
    div=$('<div class="element">').appendTo('#somewrapper').css('height',sizeOfContent+'px');
});

如果信息太少，就无法回答。

Css动态设置数组中元素的大小

3 个答案: