Question

I have a table as follows

<div  id="div13" class="ctnr">
  <table id="mainTable13" class="dtable" cellpadding="3" cellspacing="1" border="0">
    <thead>
        <tr><th>*</th><th>Proposal</th></tr>
    </thead>
    <tbody id="tbdy">
       <tr id="zrow0" class="gradeX">
          <td><input id="ckb0"      type="checkbox" /></td>
          <td        id="proposal0" style="width:55%">This is a comment</td>
       </tr>
    </tbody>
  </table>
</div>

It is referenced in code as follows:

function extractRowCell(divNode){
// Here we will extract all the checked Proposals...
var all = ''
var i=0
var dnode = '#'+divNode.id   //  First construct a CSS-like ref to the node's ID 
var mTable = dnode.replace("div","mainTable")+' '+"#tbdy tr "   //Ref to the DataTable.TopRow in the DIV
//alert(mTable);
$(mTable).each(function() {    
    //alert($(dnode+' #proposal'+i).text());
    //alert($('#ckb'+i+':checked').val());
    if ($('#ckb'+i+':checked').val() !== undefined) {
        alert($(dnode+' #proposal'+i).text());
        all = all+$(dnode+' #proposal'+i).text()+ '\n\n\n';
        }
    i=i+1;
    alert(all+'     \n'+mTable+'#proposal'+i);
    });
}

The question is why do the two commented out alerts require different selector constructions??? I am completely puzzled by this! Here, let me unscramble them and put them side by side…

    alert($('#div13 #proposal1'   ).text());
    alert($(       '#ckb1:checked').val());

Effectively the second selector does not need to indicate that it sits in the 13th div (“#div13”), while the one above without the “#div13” would reach out to “#div1”. But if you precede the second one with the “#div13” the test gives the value false all the time.

I will admit that I am confounded! I have been fighting this all day today! No clue! Any brave soul who can set me straight is my hero!

Dennis

Answer 1

Ideally the ids of element should be unique on a page. If you follow that they you don’t need any prefix for id selector to restrict the elements to match on the page.

In your case what is happening is when you prefix #div13 to #ckb1 jQuery will look for #ckb1 inside #div13 otherwise it will search in the whole page. When you don’t specify the prefix #div1 if there are multiple elements with same id jQuery will select first element whose id matches and include it in the matched set.