问题

Question

K因此，出于学习目的，我创建了自己的相等高度脚本（等于所选div的高度）。我知道有几个人在那里，但有时候会以不同的方式重新创造一些东西，你可以从中学到东西。

我创建了脚本，因此您可以使用分组类：

相等
equal1
等于****

但由于某些原因，它都没有起作用，我似乎无法弄清楚原因。这是我的代码：

// Equal height for div boxes in dashboards
function equalHeight(group) {
console.log("test");
    var tallest = 0;
    var uniques = [];
    group.each(function (i) {
        if (jQuery.inArray(i, uniques)) {
            uniques.push(i);
        }
    });
    $(uniques).each(function () {
        var thisHeight = $(this).height();
        if (thisHeight > tallest) {
            tallest = thisHeight;
        }
    });
    group.height(tallest);
}
$(document).ready(function () {
    equalHeight($("*[class^='equal']"));
});

Jsfiddle：http://jsfiddle.net/5xw3dj0q/

Answer 1

首先，您没有选择班级equal。正确的选择器是$(".equal") 由于您的选择器没有返回元素，您正在计算空数组的高度。

在DOM中选择正确的节点时，脚本可以正常运行。我无法弄清楚的是“唯一”阵列的用途。

// Equal height for div boxes in dashboards
function equalHeight(group) {
    console.log("test");
    var tallest = 0;
    var uniques = [];

    group.each(function (i) {
        if (jQuery.inArray(i, uniques)) {
            uniques.push(i);
        }
    });

    group.each(function () {
        var thisHeight = $(this).height();
        if (thisHeight > tallest) {
            tallest = thisHeight;
        }
    });

    group.height(tallest);
}

$(document).ready(function () {
    equalHeight($(".equal"));
});

http://jsfiddle.net/5xw3dj0q/1/

Answer 2

问题

您的选择器出现语法错误，无法找到任何匹配的元素。如果您正在使用部分类选择器（如您的问题所示），则您的选择器应为：

$('[class*=equal]')

您正在使用i来测试唯一性，但i是每次循环迭代的唯一索引值，因此每个项目都是唯一的。

jQuery.inArray(i, uniques)

同样jQuery.inArray，返回一个不是布尔值的数字，所以如果你要检查一个项目是否不在数组中，你需要使用：

if (jQuery.inArray(i, uniques) < 0)

或

if (jQuery.inArray(i, uniques) === -1)

最后一个问题是uniques是一个数组数组，但是你试图将它转换为jQuery obj，当jQuery尝试迭代它时会产生错误：

$(uniques).each(function ()

此外，您可以替换if语句并使用Math.max()来评估传递给它的两个值，并决定哪个值更高，如下所示：

.each(function () {        
    tallest = Math.max( tallest, $(this).height() );        
})

您的unique数组实际上不起作用，因为您正在检查数组中是否存在索引值，如果不存在 - 您正在添加它。问题是，索引值始终是唯一的，因为它随着每次迭代而递增。您可以尝试使用类作为组选择器，但多个类将使其唯一。

替代方法1

如果要区分元素组，可以多次调用相同的函数，并使用不同的选择器，如下所示：

function equalHeight(group) {   
    var tallest = 0;   
    group
        .each(function () {        
            tallest = Math.max( tallest, $(this).height() );        
        })
        .height(tallest);
}
$(function() {    
    equalHeight($('.equal1')); 
    equalHeight($('.equal2'));    
});

如果没有唯一标识每个组的东西，尝试构建一组独立元素来单独迭代是不可行的。

看一下这个例子：

Demo

替代方法2

此方法更贴近您的示例，但需要进行标记更改才能生效。您需要一个唯一的组标识符，在这个例子中，我使用了一个类equal1和equal2。问题是因为您使用了多个类，类名（在评估时）都是唯一的。

function equalHeight(group) {

    var uniques = [];

    group.each(function (i) {
        if ($.inArray($(this).attr("class"), uniques) < 0) {            
            uniques.push($(this).attr("class"));            
        }
    });

    for (i=0; i<uniques.length; i++) {

        var tallest = 0;        
        group
            .filter("." + uniques[i])
            .each(function (i) {

                tallest = Math.max( tallest, $(this).height() );    
            })
            .height(tallest);
    }
}
$(function() {
    equalHeight($('[class*=equal]'));
});

我个人认为与第一种替代方法相比，这是低效的。

以下是示例：

Jquery等高脚本

2 个答案:

问题

替代方法1

Demo

替代方法2

Demo