Javascript Jquery等高脚本

因此，出于学习目的，我创建了自己的等高脚本（与所选div的高度相等）。我知道有一些是存在的，但有时以不同的方式重新创造一些东西，你从中学习

我制作了脚本，以便您可以使用分组类，如：

• 相等的
• 等式1
• 相等的****

但由于某种原因，这些都不起作用，我似乎不明白为什么。 这是我的密码：

// 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']"));
});

---

jsiddle:

首先，您没有选择类

equal

。正确的选择器是

$（“.equal”）

由于选择器没有返回元素，因此计算的是空数组的高度

在DOM中选择正确的节点时，脚本可以正常运行。我搞不懂的是“uniques”数组的用途

// 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"));
});

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

$('[class*=equal]')

您正在使用

i

测试唯一性，但是

i

是每个循环迭代的唯一索引值，因此每个项都是唯一的

jQuery.inArray(i, uniques)

此外，还返回一个非布尔值的数字，因此，如果要检查某个项是否不在需要使用的数组中，请执行以下操作：

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

最后一个问题是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'));    
});

如果没有对每个组进行唯一标识，尝试构建一组单独迭代的唯一元素是行不通的

看看这个例子：

---

替代方法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]'));
});

功能相等高度（组）{
var uniques=[]；
每组（功能（i）{
if（$.inArray（$（this.attr（“类”），uniques）<0{
uniques.push（$（this.attr（“类”））；
}
});
对于（i=0；iCheck还提供了一把小提琴。添加了jsfiddle，感谢您的回复。@Murali:谢谢您的建议，但我想亲自尝试一下。@Goowik:您调试了选择器吗？例如：在您的文档中准备好了：
console.log（$（“*[class^='equal']））；
在控制台中检查
length
属性，该属性为
0
，如中所示，已找到零个元素。您的选择器未针对所需的元素。-
$（“.equal”）
是您最可能要查找的。修复的代码有更多问题，但错误消息会准确地告诉您出了什么问题，您可以开始逐个修复。如果您有任何问题，您可以更新您的问题：）很抱歉，我忽略了此评论。我确实尝试过并调试了它，正如您所建议的，它是一个不正确的选择器。正如Chris Spitles所建议的，我实际上需要$（'[class*=equal]'）。我的高度脚本的想法是，您可以有几个“equal”类。每个不同的名称都应该有自己的最高测量值。因此，假设您有2个equal1类和3个equal2类。equal1的最高高度将不同于equal2。感谢您的建议，它适用于所有相同的类，但问题是它将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]'));
});