CODEWITHSUNDEEP
jqueryhtml
slandau
slandau

Reputation: 24052

Loop through groups of spans in JQuery

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

Hey guys, how would I loop through this <td> in JQuery and for each group of two span elements, get the text() of the runId and the processName elements.

Upvotes: 0

Views: 5924

Answers (4)

Levi Morrison
Levi Morrison

Reputation: 19552

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();
});

Upvotes: 1

user113716
user113716

Reputation: 322502

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/

Upvotes: 0

John
John

Reputation: 1319

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

Upvotes: 3

Felix Kling
Felix Kling

Reputation: 816482

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.

Upvotes: 2

Related Questions