Loop Through Groups Of Spans In JQuery

4Get End-Of-Day Reuters Feed Rates

Solution 1:

$("span.runId").each(function(){
    var runId = $(this).text(),
        processname = $(this).next("span.processName").text();
});

Solution 2:

Functional programming to the rescue:

var data = $td.children('span.runId').map(function() {
   return {runId: $(this).text(), processName: $(this).next().text()};
}).get();

Structure the data how ever you want to.

Solution 3:

To be honest, I would suggest that if they have that type of correlation that they are wrapped together in another tag, or better yet combined as they are not even displayed. This, of course, does not apply to parsing code you do not have write/modify access to.

Suggested html:

<table>
    <tr>
        <td style="display:none;">
            <span data-runid='4' class="processName">Get End-Of-Day Reuters Feed Rates</span>
            <span data-runid='130' class="processName">Get End-Of-Day Bloomberg Feed Rates</span>
            <span data-runid='133' class="processName">CapVolsCalibration AllCurrencies EOD</span>
            <span data-runid='228' class="processName">GBP Basis Adjustment</span>
        </td>
    </tr>
</table>

jQuery:

$("td span.processName").each(function() {
    var runid, processName, $this = $(this);
    runid = $this.data('runid');
    processName = $this.text();
});

I'm not exactly sure what your needs are, but I'd even get rid of the class processName as well. Since the data isn't displayed, it's not really needed at this level assuming you don't need to access this for other purposes. This minimizes down to:

html:

<table id='someId'>
    <tr>
        <td style="display:none;">
            <span data-runid='4'>Get End-Of-Day Reuters Feed Rates</span>
            <span data-runid='130'>Get End-Of-Day Bloomberg Feed Rates</span>
            <span data-runid='133'>CapVolsCalibration AllCurrencies EOD</span>
            <span data-runid='228'>GBP Basis Adjustment</span>
        </td>
    </tr>
</table>

jQuery:

$("#someId").find('td span').each(function() {
    var runid, processName, $this = $(this);
    runId = $this.data('runid');
    processName = $this.text();
});

Technically, you can't have a span outside of a td in a table, so it could be reduced further:

$("#someId").find('span').each(function() {
    var runid, processName, $this = $(this);
    runId = $this.data('runid');
    processName = $this.text();
});

Solution 4:

So many ways to do things with jQuery:

$('td > span:nth-child(2n-1)').text(function(i,txt) { 
    alert(txt + $(this).next().text());
});

Example: http://jsfiddle.net/vqs38/