Javascript 从列表jquery中获取最近的类

这很难解释，因此我创建了一个示例：

我的想法是在相应的输入生效时更改每列的颜色

如果有人有更好的想法，请让我知道

当我聚焦输入时，我需要列的当前类

• 第一列输入，获取红色列的类
• 第二个，得到蓝色列的类
• 所以继续吧

因为如果我得到这个类，那么我可以用这个类操纵任何东西

代码如下：

$(".inputTest").focusin(function(){
    var class = $(this).closest('.tableList')
                    .children().children().children('.auxClass')
                    .attr('class')
                    .split(' ')[0];
                alert(class);
});

这是主代码，我尝试了很多东西，但什么都没有

谢谢

试试这个：

$(".inputTest").focus(function(){
    var class = $(this).closest('table').parent().attr('class');
    alert(class);
});

---

编辑：哦，我刚刚意识到你的输入不在你的表中，我想你很难将它们与它们所在的表/列相匹配。您需要添加一个公共属性来识别它们。

首先，我要添加一个外部表，将页面分为左侧和右侧。这样，红色边框下的输入和蓝色边框下的输入都有各自的表

然后，您可以在最近的表下搜索第一个

td

：

$(".inputTest").focusin(function(){
    var class = $(this).closest('table').find('td:eq(0)').attr('class');
    alert(class);
});

---

如其他答案中所述，您的输入实际上与红色/蓝色边框的表不在同一“列”中，但您可以使它们使用主表上的

元素，然后使用索引值将您的输入与其列相匹配

---

HTML-唯一添加的是开头的两个

元素

<table width="100%" border="1" class='tableList'>
<col span="2" class="left">
<col span="2" class="right">

    <tr>
        <td class="101 auxClass" width="261px" colspan="2" style="border: solid red;">
            <table border="1" cellspacing="1" cellpadding="1" width="100%" height="70px">
                <tbody>
                    <tr>
                        <td colspan="2">Something</td>
                    </tr>
                    <tr>
                        <td width="78px">Something 2</td>
                        <td>Total</td>
                    </tr>
                </tbody>
            </table>
        </td>
        <td class="102" width="261px" colspan="2" style="border: solid blue;">
            <table border="1" cellspacing="1" cellpadding="1" width="100%" height="70px">
                <tbody>
                    <tr>
                        <td colspan="2">
                       Something 3
                        </td>
                    </tr>
                    <tr>
                        <td width="78px">Something 4</td>
                        <td width="75px">Total 2</td>
                    </tr>
                </tbody>
            </table>
        </td>
    </tr>
    <tr>
        <td>Result</td>
        <td><input type="text" class="inputTest"/></td>
        <td>Result</td>
        <td><input type="text" class="inputTest"/></td>
    </tr>
    <tr>
        <td>Result</td>
        <td><input type="text" class="inputTest"/></td>
        <td>Result</td>
        <td><input type="text" class="inputTest"/></td>
    </tr>
    <tr>
        <td>Result</td>
        <td><input type="text" class="inputTest"/></td>
        <td>Result</td>
        <td><input type="text" class="inputTest"/></td>
    </tr>
</table>

jQuery

$(".inputTest").focusin(function(){
    var colidx = $(this).closest('td').index();


     if (colidx == 1) {
          $("col").removeClass('current');
          $("col.left").addClass('current');
     }  else if (colidx == 3) {
          $("col").removeClass('current');   
          $("col.right").addClass('current');
     }

});

您的主表实际上有4列，您需要将其拆分为两个半表，每个半表有两列，输入位于每半表的第二列

jQuery正在查找输入的父级

td

的索引-主表中有四列，因此

td

的索引将是0、1、2或3-并且

input

将位于单元格索引1或单元格索引3中。当它发现哪个元素时，它会将一个类添加到相关的

col

元素中，您可以向该元素添加背景突出显示

请注意，尽管可以应用于

col

元素的CSS是有限的，但有关选项，请参见：，以便它取决于您想要执行的操作

---

然而，我认为，从这一点来看，您可能会以td索引0和1或td索引2和3为目标（如果需要）

未定义，您可以在JSFIDLE中尝试。@ric_bfa:是的，我刚刚看到了错误，我认为您的输入在同一个表中-检查我的edit@John斯特里克勒：在演示中。请检查一下。你的加分需要做一些工作。您所能做的最低限度是添加类，这样您就可以在不大量迭代DOM的情况下查找元素。

$(".inputTest").focusin(function(){
    var colidx = $(this).closest('td').index();


     if (colidx == 1) {
          $("col").removeClass('current');
          $("col.left").addClass('current');
     }  else if (colidx == 3) {
          $("col").removeClass('current');   
          $("col.right").addClass('current');
     }

});