jQuery 选择器喜怒无常

Question

过去两天我刚刚学习了 jQuery，所以我对此还很陌生。

我正在尝试构建一个简单的导航侧边栏。我将这些栏构建为表格，当用户浏览特定单元格时，该单元格会亮起，并且另一个子导航栏会出现在原始栏旁边。

原始栏出现在标题的正下方。所以我使用的语法是:

var headerHeight = $('#headerTable').height();
$('#selectStart').offset({left: 0, top: headerHeight});
....
<table id="selectStart" class="selector1">
    <tr><td id="sel1Projects" class="selector1">
....

到目前为止，一切都很好。现在我想要做到这一点，以便当用户单击该表中的 a 时，相应的子导航栏立即出现在第一个导航栏的右侧。所以我写了两个新表来测试它:

<table id="selectProjects" id="table2" class="selector2" class="table2">
<tr><td id="sel2Project1" class="selector2">
....
<table id="selectDevelopment" id="table2" class="selector2" class="table2">
<tr><td id="sel2Dev1" class="selector2">

但是这些选择器确实令人头疼。当我刚刚这样做时

var select1Width = $('#selectStart').width();
$('#selectProjects').offset({left: select1Width, top: headerHeight});
$('#selectDevelopment').offset({left: select1Width, top: headerHeight});

它工作得很好；然而，这不是很好的编码 - 我应该将所有类似的表格分组，以便我可以以相同的方式放置它们，然后只显示我希望用户当时看到的表格。

$('.selector2').offset(...)

就选择所有表格而言效果很好，但它也将所有 s 放在同一位置，因为出于样式目的它们都共享相同的类。然而到目前为止，这正是我所期望的。

$('.selector2 table').offset(...)

我希望这只是选择该类中的表。它没有做任何事情。是我打字方式有问题吗？ 经过一番挫折后，我为每个类添加了第二个类“table2”。

$('#table2').offset(...)

还是什么都没有。所以我为他们添加了新类(class)

$('.table2').offset(...)

什么都没有；然而，使用他们共享的另一个类，selector2，确实有效。这不可能是不需要选择表格的问题，因为当我单独选择表格时，我得到了想要的结果。

那么我做错了什么，我不明白什么？

Answer 1

而不是 $('.selector2 table').offset(...)

试试这个

$('table.selector2').offset(...)