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')、そのクラスですべての要素をキャッチすることです。それがそれです。たとえば、一意の識別子が必要ですが、$('#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');
});

情報が少なすぎて答えられません。

Answer 3

これはあなたが探していたものかもしれないと思いますか？それぞれ.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');
});