Question

看起来像是一项简单的任务，但却把我带到了死胡同。我有不同内容的HTML列表需要达到相同的高度。

我的代码：

 function tab_info_height(){

    var maxHeight = 0;
    alert(maxHeight + " - null px. Set to zero.") // Cheching for zero

    $(".tabs-container .tabs-info li").each(function(maxHeight){

      if(maxHeight < $(this).height()){
        var maxHeight = $(this).height();
        alert(maxHeight);
        alert("Good!");
      }else{
        alert("No!");
      }

    });
  }

有许多警告一步一步检查。所以我在execitual期间获得了以下数字：32,64,96和 48 。为什么我明白了为什么不在那里？我已经只搜索了解决方案，但我无法理解我的错误在哪里。

Answer 1

因为您使用函数参数隐藏了maxHeight变量（请参阅****条评论）：

function tab_info_height() {

    var maxHeight = 0;
    //  ^-------------------- **** Here's the variable
    alert(maxHeight + " - null px. Set to zero.") // Cheching for zero

    $(".tabs-container .tabs-info li").each(function(maxHeight) {
        // **** Here's the argument ---------------------^

        if (maxHeight < $(this).height()) {
            var maxHeight = $(this).height();
            //  ^--------------------- **** Also get rid of this `var`
            alert(maxHeight);
            alert("Good!");
        } else {
            alert("No!");
        }

    });
}

所以在你的函数中，你使用的是参数，而不是变量。由于您不需要或不想参数，请将其删除。另外，从var行中移除var maxHeight = $(this).height();;删除参数后，var将继续导致阴影。

如此微小的变化：

function tab_info_height() {

    var maxHeight = 0;
    alert(maxHeight + " - null px. Set to zero.") // Cheching for zero

    $(".tabs-container .tabs-info li").each(function() {

        if (maxHeight < $(this).height()) {
            maxHeight = $(this).height();
            alert(maxHeight);
            alert("Good!");
        } else {
            alert("No!");
        }

    });
}

除非您确实需要if/else，否则请使用Math.max：

function tab_info_height() {

    var maxHeight = 0;

    $(".tabs-container .tabs-info li").each(function() {
        maxHeight = Math.max(maxHeight, $(this).height());
    });
}

如果您需要if/else，请考虑将$(this).height()的结果存储在变量中，这样您就不会两次{{1} }}和$(this)必须做的工作。

您可能还需要函数末尾的return语句，例如：

.height()

如果你想简洁到极致，并且你有可用的ES5功能（因为浏览器提供它们，或者你正在使用polyfill），你真的可以去镇上：

return maxHeight;

＆＃13;

var reduce = Array.prototype.reduce;
function tab_info_height() {
    return reduce.call($(".tabs-container .tabs-info li"), function(max, el) {
          return Math.max(max, $(el).height());
    }, 0);
}

＆＃13;

var reduce = Array.prototype.reduce;
function tab_info_height() {
  return reduce.call($(".tabs-container .tabs-info li"), function(max, el) {
    return Math.max(max, $(el).height());
  }, 0);
}

$("<p>").html("Max: " + tab_info_height()).appendTo(document.body);

＆＃13;

Answer 2

您正在将maxHeight传递给该函数，因此它会覆盖您的全局：function(maxHeight)。

通过在功能中进行设置，您可以将其设置为index的{{1}}。

试试这个：

li

See this for more information on the each loop

在jQuery中计算块高度的奇怪问题

2 个答案: