jQuery：在页面加载时设置自动高度

Question

I need the class inside of the <li> tag to be auto height/adjustable to its <li> , however it wasn't possible with CSS( height:auto;height:100% and other options) so I tried jQuery but I'm a newbie so I tried what I've learned so far.
The following code does just what I need but I wasn't able to figure out how to set the auto height for the class on page load instead of .click function. Please note that I have many <li> tags with different sizes so (this) needs to be included.

$j("#accordion ul li").click(function () { 
  var current = $j(this).height() - 2;
  $j(this).find(".status-green").attr("style","height:" + current + "px");
});

Thanks in advance

Answer 1

$j(function () {
    $('#accordion').find('.status-green').each(function (index, value) {
        var $value = $j(value),
            h      = $value.parents('li').height() - 2;
        $value.height(h);
    });
});

This will find and iterate through each .status-green element within the #accordion element when the DOM is ready ( $j(function(){}); is short-hand for $j(document).ready(function(){}); ).

--Update--

This more closely resembles your code:

$j(function ($) {
    $("#accordion").find('li').each(function (index, value) { 
        var $value  = $(value),
            current = $value.height() - 2;
        $value.find(".status-green").height(current);
    });
});

If you pass $ as a argument in the first line then you can use $() rather than $j() . Also the .height() function assumes pixels if only a number is passed to it.