JQUERY sometimes element is not found if element is specified

Question

I have a code.

var countRow = $('table#receiving-stock-view tr').length - 1;
var ar = new Array();
for(var iter=0;iter<countRow;iter++){
ar[iter] = $('div.modal table#receiving-stock-view tr#'+iter).find('input[name=rspid]').attr('id')
        +","+$('div.modal table#receiving-stock-view tr#'+iter).find('input[name=rsqty]').val()
        +","+$('div.modal table#receiving-stock-view tr#'+iter).find('input[name=rscost]').val()
        +","+$('div.modal table#receiving-stock-view tr#'+iter).find('input[name=rssrp]').val();
        console.log($('table#receiving-stock-view tr#'+iter).find('input[name=rsqty]').val());
        console.log(ar[iter]);
}

However, during the loop, it only works for the first row, consistently. It fails randomly on the other rows.

HOWEVER,

for(var iter=0;iter<countRow;iter++){
ar[iter] = $('#receiving-stock-view tr#'+iter).find('input[name=rspid]').attr('id')
        +","+$('#receiving-stock-view tr#'+iter).find('input[name=rsqty]').val()
        +","+$('#receiving-stock-view tr#'+iter).find('input[name=rscost]').val()
        +","+$('#receiving-stock-view tr#'+iter).find('input[name=rssrp]').val();
}

If I do not specify which element to find and leave the ids, it reads all the values properly. Any idea why this happens? It is really wierd.

EDIT: I add a new row using ajax. and the whole table is inside a modal class.

<table id="receiving-stock-view">

 <thead hidden="true" style="display: table-header-group;">
 <tr>
 <th>Product</th>
 <th>Quantity</th>
 <th>Cost</th>
 <th>SRP</th>
 <th>Sub-Total</th></tr>
 </thead>

  <tbody>
 <tr id="0">
 <td><span><input type="text" value="HeadPhoneszs" name="rspid" id="1"></span></td>
 <td><input type="text" value="1" name="rsqty" id="rsqty_id"></td>
 <td><input type="text" value="1" name="rscost" id="rscost_id"></td>
 <td><input type="text" value="1" name="rssrp" id="rssrp_id"></td></tr>
 <tr id="1"><td><span><input type="text" value="vp" name="rspid" id="13"></span></td>
 <td><input type="text" value="2" name="rsqty" id="rsqty_id"></td>
 <td><input type="text" value="2" name="rscost" id="rscost_id"></td>
 <td><input type="text" value="2" name="rssrp" id="rssrp_id"></td>
 </tr>
 </tbody>
</table>

actually, yes. I add a new row using ajax. And everything happens inside a modal class. How did you know? — Francis Xavier S. Antazo, Oct 21 '13 at 04:11

score 0 · Answer 1 · edited Dec 15 '16 at 09:48

When you use

$('div.modal table#receiving-stock-view tr#'+iter)

the browser first looks for a div that has a modal class. As per your comment , you do have more than 1 div with same class. This can make the browser to choose any one div element. So this can fail randomly.

When you use
```
$('#receiving-stock-view tr#'+iter)
```

the browser tries to match the id receiving-stock-view of the table with the DOM element. Since its unique, its able to successfully match the table row every time.

If you are able to use an id to match, then that is the best and most efficient way to match an element in DOM. In such cases, the pre-selectors are not needed and they degrade the performance of the web page.

JQUERY sometimes element is not found if element is specified

1 Answers1