jquery select elements in a loop

Question

Currently I have this hidden input in a loop and it works:

<input type="hidden" class="md" name="business-222" value="11|55|some name| some address|800-444-8800|somepage.html" />

<input type="hidden" class="results" name="business-222" value="22|77|other name| other address|800-444-8800|otherpage.html" />


$(".results").each(function(){
  var text = $(this).attr('value').split('|');
  var name = text[2];
  ...
});

I was womndering what would be a good way to get the data from this structure below without using hidden elements..

<tr>
  <td><a href="/somepage.html">some name</a></td>
  <td>some address</td>
  <td>some phone</td>
</tr>

<tr>
  <td><a href="/otherpage.html">other name</a></td>
  <td>other address</td>
  <td>other phone</td>
</tr>

I was thinking to make it and somehow select first second third td ?

Thanks !!

it depends what you want out of that structure. Is it the link, or the contents of the anchor tag? — Aram Kocharyan
– Aram Kocharyan, Commented Jan 17, 2012 at 8:17
Aram, I kind of need all whats there its for google map with multiple markers, external javascript with .each keeping html and js very minimalistic... — Andras
– Andras, Commented Jan 17, 2012 at 8:20

Sarfraz · Accepted Answer · 2012-01-17 08:21:34Z

1

I was womndering what would be a good way to get the data from this structure below without using hidden elements..

Try:

$("#tableID > tbody > tr").each(function(){
  var first = $("td:eq(0)", $(this)).html();
  var second = $("td:eq(1)", $(this)).html();
  var third = $("td:eq(2)", $(this)).html();

  alert(first);
  alert(second);
  alert(third);

});

Working Example

answered Jan 17, 2012 at 8:21

Sarfraz

384k81 gold badges561 silver badges613 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

David Richard Over a year ago

Would this work for multiple rows? The variables will get written over, right?

haynar · Accepted Answer · 2012-01-17 08:27:32Z

0

I think you need something like this:

$('table tr').each(function(index, elem) {
    $(this).find('td').each(function(index, elem) {
        var obj = {};
        switch(index) {
        case 0:
            obj.name = $(this).find('a').text();
            break;
        case 1:
            obj.address = $(this).text();
            break;
        case 2:
            obj.phone = $(this).text();
            break;
        }

        // do something here with the obj, for example put it in a global array or so
    });
});

answered Jan 17, 2012 at 8:27

haynar

6,0517 gold badges37 silver badges53 bronze badges

Comments

Sarah Groß · Accepted Answer · 2012-01-17 08:49:46Z

0

Why not just output the data you need as a JS-object? For example:

    data = {};
    data.poi1 = {
        val1    : 11,
        val2    : 55,
        name    : 'some name',
        address : 'some address',
        phone   : '800-444-8800',
        page    : 'somepage.html'
    };
    data.poi2 = {
        val1    : 22,
        val2    : 77,
        name    : 'other name',
        address : 'other address',
        phone   : '800-444-8800',
        page    : 'otherpage.html'
    };
    alert(data.poi1.val1);

answered Jan 17, 2012 at 8:49

Sarah Groß

10.9k4 gold badges30 silver badges53 bronze badges

Comments

Andras · Accepted Answer · 2012-01-17 16:25:41Z

Thanks for all the answers Its working now just have a minimal hidden for lat/long will clean up that later..

<tr class="results">
<td><div class="m maps" id="ms_1"></div><input type="hidden" class="geo" name="business-12345" value="32.9131|-96.8822" /></td>
<td><a href="/architects">Architects</a></td>
<td>123456 Abc Ln, Dallas, TX 75056, USA</td>
<td>888-222-0099</td>
</tr>


$(".results").each(function() {
    var coords = $("td:eq(0)", $(this)).find('.geo').attr('value').split('|');
    var name = $("td:eq(1)", $(this)).html();
    var address = $("td:eq(2)", $(this)).html();
    var phone = $("td:eq(3)", $(this)).html();
    var latlng = new google.maps.LatLng(coords[0], coords[1]);
    var marker = createMarker(latlng, '<span class="fs10"><strong>'+name+'</strong><br />'+address+'<br />'+phone+'</span>');
});

Collectives™ on Stack Overflow

jquery select elements in a loop

4 Answers 4

Working Example

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related