I have been teaching myself JS and Jquery and I still struggle with how to effectively use $ to loop through an object and extract the info I want.
I have a table that has a flag icon and a title describing that I want to put at end of the row. However, there are sometimes other icons that I must ignore. So I look for "flag" in url and if it exist I set innerHTML of 2nd to last cell to 'title'.
As you can see below I have had to create a decrement VAR y to keep from skipping to next row with "title" if I encounter non flag icon.
I want this row to be appended with "title" which is the location:
<td>11:44pm</td><td><a href="/stats/visitors?site_id=66351439&date=2011-04-27&country=the+united+states"></a></td><td> <a class="custom" title="Comcast Cable" href="/stats/visitors?site_id=66351439&date=2011-04-27&ip_address=75.70.103.23">Comcast Cable</a></td><td><a href="/stats/visitors-actions?site_id=66351439&date=2011-04-27&session_id=228613269">1 action</a></td><td>10s</td><td width="100%"> </td><td></td>
To look like this:
<td>11:44pm</td><td><a href="/stats/visitors?site_id=66351439&date=2011-04-27&country=the+united+states"></a></td><td> <a class="custom" title="Comcast Cable" href="/stats/visitors?site_id=66351439&date=2011-04-27&ip_address=75.70.103.23">Comcast Cable</a></td><td><a href="/stats/visitors-actions?site_id=66351439&date=2011-04-27&session_id=228613269">1 action</a></td><td>10s</td><td width="100%">Aurora, CO, USA</td><td></td>
So my question - What is a better way to do this whole procedure. Here is a link to the jsfiddle - http://jsfiddle.net/ukJxH/78/ - at 3:47 you can see a non flag icon.
var x = $('.tableborder tr img');
y = 1;
for (i = 0; i < x.length; i++) {
var flagg = x[i].src;
var pattn = /flag/gi;
var loca = x[i].title;
if (flagg.match(pattn) == "flag") {
//$('td:nth-child(6)')[i + 14 + y].innerHTML = loca;
$('#main :nth-child(i) td:nth-child(6)')[i].innerHTML = loc } else {
y = y - 1;
}
}
I'm sorry but I'm not sure I understand your question too well. However, the following selector will give you all the flags in the table
$('.tableborder tr img[src*="flag"]').each(function(){
$(this)
.closest('td')
.nextAll('td:last')
.html('Title from image : ' + $(this).attr('title'));
});
This should give you a chance to traverse the DOM and get at what you need
Live demo : http://jsfiddle.net/jomanlk/ukJxH/87/