I thought that .each would pull an array back of all matching, not children elements of matching as well.
What Im trying to do is alternate colours of visable rows, which I thought would be easy using jQuery and .each(), however my code seems to pick the child div elements instead of just the matching element:-
HTML:-
<div id="divTransactions">
<div id="row56" class="clsTransactionRow">
<div class="txtTransDate">2012-12-24</div>
<div class="txtTransText">DB Payment</div>
<div class="txtTransStatus">Cleared</div>
</div>
<div id="row57" class="clsTransactionRow">
<div class="txtTransDate">2012-12-23</div>
<div class="txtTransText">CC Payment</div>
<div class="txtTransStatus">Held</div>
</div>
<div id="row58" class="clsTransactionRow">
<div class="txtTransDate">2012-12-22</div>
<div class="txtTransText">Standing Order</div>
<div class="txtTransStatus">Disputed</div>
</div>
<div>
Select all Open in new window
CSS:-
#divTransactions {width:400px; }
.clsTransactionRow { width:400px; }
.clsTransactionRowEven { background-color: #FFFFFF; }
.clsTransactionRowOdd { background-color: #CCCCCC; }
.txtTransDate { width:133px; float:left;}
.txtTransText { width:133px; float:left; }
.txtTransStatus { width:133px; float:left; }
Select all Open in new window
JQuery:-
var rowCount=0;
$("#divTransactions .clsTransactionRow :visible").each( function(_index, _value ) {
$(this).removeClass('clsTransactionRowEven');
$(this).removeClass('clsTransactionRowOdd');
if (rowCount%2==0){
$(this).addClass('clsTransactionRowEven');
}
else {
$(this).addClass('clsTransactionRowOdd');
}
rowCount++;
});
Select all Open in new window
To show you what I mean, Ive put it on jsFiddle:-
http://jsfiddle.net/DEVdJ/
How can I just get the matching rows to return, and not all the child elements, so I can set the row colours correctly?