获取Html.ListBoxFor项的计数和高度

Question

使用

• C＃
• MVC 5
• Razor 3

我有一个Html.ListBoxFor ...

          @Html.ListBoxFor(
            x => x.sunSelectedList,
            Model.sunList,
            new { @class = "eligibleAvailableListBox" }
            )

我有jQuery javascript ..

@section Scripts {
<script type="text/javascript">
    $(function () {

        var ssList = $("#sunSelectedList");

        // the variable above is valid and contains all items

    });
</script>
}

使用变量ssList，如何获取每个项目的选项数量和客户端高度？

Answer 1

获取选项数量

var options = $("#sunSelectedList").children('option');
var optionCount = options.length;

要获得每个选项的高度，请使用.height()或.outerHeight()

options.each(function(index, item) {
  var optionHeight = $(this).outerHeight();  // includes padding and borders
}

修改

从文档中，＆＃34;所有选项元素都被视为隐藏，无论其选择状态如何。＆＃34; 因此.height()或.outerHeight()总是返回0。使用window.getComputedStyle(this,null).lineHeight;并不可靠，因为Chrome可能会返回normal而不是数字。可能的解决方法是将选项的内容复制到临时div元素中并计算高度。

options.each(function(index, item) {
  var temp = $('<div></div>').text($(this).text());
  $('body').append(temp);
  console.log(temp.height());
  // or
  console.log(window.getComputedStyle(temp[0], null).height);
  temp.remove();
});