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

Question

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

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

它改变了每个 .element 的高度

Answer 1

从字面上理解您的问题，并根据您的有限标记提出一个想法：

jsFiddle 演示

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');

$.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');
});

信息太少，无法回答。