如何使jQuery脚本应用于多个html表

我对jQuery非常陌生，但已经开发出一个脚本，可以在特定断点处操纵th和td标记的高度。它基本上在给定表的每一行中查找最高的th或td，并将该高度应用于该特定行中的所有th和td标记，然后移动到下一行，以此类推

该脚本是必需的，因为有一个错误的Wordpress插件错误地改变了表在特定断点处的外观。插件是我们开发的核心，无法更改，因此我们必须使用jQuery来操纵表的外观

一切正常，但现在我需要它在任何给定页面上显示多个表

每个表都有“tablepress”类，我尝试用

$('table.tablepress').each(function() {

...our script...

})

但这是行不通的，逻辑让我心碎：）

以下是我们的脚本：

jQuery(document).ready(function($){

    $(window).resize(function(){

    //get breakpoint as defined in table classes (desktop,tablet,phone)

    var responsivemode = $("#tablepress-999-no-2").attr('class').split(/ |-/); 
    var breakpoint = 0;
    if($.inArray('desktop',responsivemode) > -1){
        var breakpoint = 1200;
    }else if($.inArray('tablet',responsivemode) > -1){
        var breakpoint = 980;
    }else if($.inArray('phone',responsivemode) > -1){
        var breakpoint = 768;
    }else{
        var breakpoint = 0;
    }

    //only manipulate table if breakpoint reached

    if (parseInt($(window).width()) < breakpoint) {

    var myobject = {};

    //1.each tr has the same number of ths/tds; each th/td has the same class to identify its position in the row - <th class="column-1"><th class="column-2">...<td class="column-1"><td class="column-2">
    //2.loop through each thead row, getting th class and height  
    //3.check if class already stored in myobject; if yes, check if current th height in loop is greater than value in myobject and overwrite it; if class not yet stored in myobject, add it
    //4.loop 

    $("#tablepress-999-no-2 thead tr").each(function(){
        $(this).find('th').each(function(){ 
            var currentthclass = $(this).attr('class').split(' ')[0];
            var currentthheight = $(this).height();
            if(myobject.hasOwnProperty(currentthclass)){
                if($(this).height() > myobject[currentthclass]){
                    myobject[currentthclass] = currentthheight;
                }
            }else{
                myobject[currentthclass] = currentthheight;
            }
        });//end th loop
    });//end tr loop    

    //1.loop through each tbody row, getting td class and height  
    //2.check if class already stored in myobject; if yes, check if current td height in loop is greater than value in myobject and overwrite it; if class not yet stored in myobject, add it
    //3.loop    

    $("#tablepress-999-no-2 tbody tr").each(function(){
        $(this).find('td').each(function(){ 
            var currenttdclass = $(this).attr('class').split(' ')[0];
            var currenttdheight = $(this).height();
            if(myobject.hasOwnProperty(currenttdclass)){
                if($(this).height() > myobject[currenttdclass]){
                    myobject[currenttdclass] = currenttdheight;
                }
            }else{
                myobject[currenttdclass] = currenttdheight;
            }
        });//end td loop
    });//end tr loop

    //1.loop through myobject getting class name and height
    //2.apply new heights to all th and td tags in table

    $.each(myobject, function(keyobj,valueobj){
        $('#tablepress-999-no-2 tbody tr td.'+keyobj).each(function(){
            $(this).height(valueobj);
        });
        $('#tablepress-999-no-2 thead th.'+keyobj).each(function(){
            $(this).height(valueobj);
        });
    });

    }else{

    //if current window size not below breakpoint, return all th and td heights to original size;

        $('#tablepress-999-no-2 tbody td').css('height','auto');    
        $('#tablepress-999-no-2 thead th').css('height','auto');

    }//end check breakpoint

    })//end resize function

});

jQuery（文档）.ready（函数（$）{
$（窗口）。调整大小（函数（）{
//获取表类（桌面、平板电脑、手机）中定义的断点
var responsivemode=$（“#tablepress-999-no-2”）.attr（'class'）.split（/|-/）；
var断点=0；
如果（$.inArray（'desktop'，responsivemode）>-1）{
var断点=1200；
}如果（$.inArray（'平板电脑'，响应模式）>-1），则为else{
var断点=980；
}如果（$.inArray（'phone'，responsivemode）>-1），则为else{
var断点=768；
}否则{
var断点=0；
}
//仅在到达断点时操作表
if（parseInt（$（window）.width（））<断点）{
var myobject={}；
//1.每个tr具有相同数量的ths/td；每个th/td具有相同的类别，以确定其在行中的位置-。。。
//2.在每个THAD行中循环，获得等级和高度
//3.检查类是否已存储在myobject中；如果是，检查循环中当前的th height是否大于myobject中的值并覆盖它；如果类尚未存储在myobject中，则添加它
//4.环路
$（“#tablepress-999-no-2 thead tr”）。每个（函数（）{
$（this.find（'th'）.each（function（）{
var currentthclass=$（this.attr（'class'）.split（''）[0]；
var currentthheight=$（this）.height（）；
if（myobject.hasOwnProperty（currentthclass））{
if（$（this）.height（）>myobject[currentthclass]）{
myobject[currentthclass]=currentthheight；
}
}否则{
myobject[currentthclass]=currentthheight；
}
})；//结束循环
})；//结束tr循环
//1.循环通过每一排车身，获得td等级和高度
//2.检查类是否已存储在myobject中；如果是，检查循环中当前的td高度是否大于myobject中的值并覆盖它；如果类尚未存储在myobject中，则添加它
//3.环路
$（“#tablepress-999-no-2 tbody tr”）。每个（函数（）{
$（this）.find（'td'）.each（function（）{
var currenttdclass=$（this.attr（'class'）.split（''）[0]；
var currentdheight=$（this）.height（）；
if（myobject.hasOwnProperty（currenttdclass））{
if（$（this）.height（）>myobject[currenttdclass]）{
myobject[currenttdclass]=当前TdHeight；
}
}否则{
myobject[currenttdclass]=当前TdHeight；
}
})；//结束td循环
})；//结束tr循环
//1.通过myobject循环获取类名和高度
//2.将新高度应用于表中的所有th和td标签
$.each（myobject，函数（keyobj，valueobj）{
$（#tablepress-999-no-2 tbody tr td.+keyobj）。每个（函数（）{
$（此）.高度（valueobj）；
});
$（'#tablepress-999-no-2 thead.'+keyobj）。每个（函数（）{
$（此）.高度（valueobj）；
});
});
}否则{
//如果当前窗口大小不低于断点，则将所有th和td高度返回到原始大小；
$（#tablepress-999-no-2 tbody td'）.css（'height'，'auto'）；
$（'tablepress-999-no-2 thead th'）.css（'height'，'auto'）；
}//结束检查断点
})//结束调整大小功能
});

---

提前感谢您的帮助

我认为这里面有很多可以避免的循环。但是，由于这只适用于一个表，您可以尝试下面的代码，该代码在所有表中循环并应用您的逻辑

$(window).resize(function(){
    $('table.tablepress').each(function() {
        var responsivemode = $(this).attr('class').split(/ |-/);

        // ALL BREAKPOINT CODE 

        if (parseInt($(window).width()) < breakpoint) {

           var myobject = {};

            $(this).find("thead tr").each(function () {
                // full my object code
            });

            $(this).find("tbody tr").each(function () {
                // myobject logic. I didn't understand much of it :P
            });

            var $that = $(this); // refers to the table

            $.each(myobject, function (keyobj, valueobj) {
                $that.find("tbody tr td." + keyobj).each(function () {
                    $(this).height(valueobj);
                });

                $that.find("thead th." + keyobj).each(function () {
                    $(this).height(valueobj);
                });
            });
        }
        else
        {
            $(this).find("tbody td").css('height', 'auto');
            $(this).find("thead th").css('height', 'auto');
        }
    });
});

$（窗口）。调整大小（函数（）{
$（'table.tablepress'）。每个（函数（）{
var responsivemode=$（this）.attr（'class'）.split（/|-/）；
//所有断点代码
if（parseInt（$（window）.width（））<断点）{
var myobject={}；
$（this）.find（“thead tr”）.each（函数（）{
//完整的我的目标代码
});
$（this）.find（“tbody tr”）.each（函数（）{
//我的对象逻辑。我不太懂：P
});
var$that=$（this）；//引用该表
$.each（myobject，函数（keyobj，valueobj）{
$that.find（“tbody tr td.+keyobj）.每个（函数（）{
$（此）.高度（valueobj）；
});
$that.find（“thead th.”+keyobj）.each（函数（）{
$（此）.高度（valueobj）；
});
});
}
其他的
{
$（this.find（“tbody td”）.css（'height'，'auto'）；
$（this.find（“thead-th”）.css（'height'，'auto'）；
}
});
});

此

关键字引用当前正在循环的当前表元素，获取此表中所有匹配的选择器。

您可以更改：

$("#tablepress-999-no-2 thead tr")

到

---

它将适用于所有id以tablepress开头的表。

我建议它们使用类而不是循环id。@MasterYoda我遵循了他的代码tbh。我也会选择$（“.tablepress”），但我不想“查看”他的代码。谢谢，但是当每个表都有相同类名的ths和tds时，我的高度会从上一个表调整过来

$('table[id^="tablepress"] thead tr')