CODEWITHSUNDEEP
jqueryjquery-selectors
Andrew Latham
Andrew Latham

Reputation: 6132

jQuery selectors being temperamental

I just learned jQuery over the last two days, so I'm kind of new to this.

I'm trying to build a simple navigation sidebar. I built the bars as tables, and when the user goes over a specific cell, that cell lights up and another sub-navigational bar appears next to the original bar.

The original bar appears immediately below the header. So the syntax I used was:

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

So far, so good. Now I want to make it so that when the user clicks on a in that table, the corresponding sub-navigational bar appears immediately to the right of the first navbar. So I wrote two new tables to test it:

<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">

But the selectors for these are being a real pain in the neck. When I just do 

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

It works perfectly; however, this isn't very good coding - I should be grouping all the similar tables so that I can position them all the same way, and then only show the one that I want the user to see at the time. 

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

works fine as far as selecting all the tables, but it also puts all the s in the same spot, since they all share the same class for styling purposes. So far, however, this is all what I expected.

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

I expected this to just select the tables in that class. It didn't do anything. Is there a problem with the way I'm typing it? After some frustration, I added the second class, "table2", to each of them. 

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

Still nothing. So I added the new class for them

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

Nothing; however, using the other class they share, selector2, does work. And it can't be an issue of not needing to select the tables, because when I selected the tables individually, I got the desired result.

So what am I doing wrong and what am I not understanding?

Upvotes: 2

Views: 69

Answers (2)

Pavan
Pavan

Reputation: 4339

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

try this

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

Upvotes: 1

Toping
Toping

Reputation: 755

You cant repeat id for jquery...see if changing it solves your prob

Upvotes: 0

Related Questions