iterating with each and contains in jquery

Question

Given this html markup

                <tr>
                    <td class="tdDescCell"><b><i>Product Savings:&nbsp;&nbsp;</i></b></td>
                    <td class="tdDescCell"><b><i>&nbsp;&nbsp;<asp:Label ID="lblEBSavings_Q1" Text="" cssClass="labelValueCalc" runat="server" ClientIDMode="Static"></asp:Label></i></b></td>
                    <td class="tdDescCell"><b><i>&nbsp;&nbsp;<asp:Label ID="lblEBSavings_Q2" Text="" cssClass="labelValueCalc" runat="server" ClientIDMode="Static"></asp:Label></i></b></td>
                    <td class="tdDescCell"><b><i>&nbsp;&nbsp;<asp:Label ID="lblEBSavings_Q3" Text="" cssClass="labelValueCalc" runat="server" ClientIDMode="Static"></asp:Label></i></b></td>
                    <td class="tdDescCell"><b><i>&nbsp;&nbsp;<asp:Label ID="lblEBSavings_Q4" Text="" cssClass="labelValueCalc" runat="server" ClientIDMode="Static"></asp:Label></i></b></td>
                </tr>

Which renders like

                 <tr>
                    <td class="tdDescCell"><b><i>Product Savings:&nbsp;&nbsp;</i></b></td>
                    <td class="tdDescCell"><b><i>&nbsp;&nbsp;<span id="lblEBSavings_Q1" class="labelValueCalc"></span></i></b></td>
                    <td class="tdDescCell"><b><i>&nbsp;&nbsp;<span id="lblEBSavings_Q2" class="labelValueCalc"></span></i></b></td>
                    <td class="tdDescCell"><b><i>&nbsp;&nbsp;<span id="lblEBSavings_Q3" class="labelValueCalc"></span></i></b></td>
                    <td class="tdDescCell"><b><i>&nbsp;&nbsp;<span id="lblEBSavings_Q4" class="labelValueCalc"></span></i></b></td>
                </tr>

I use the following jquery to set the labels text, which seems quite redundant and sloppy.

             $("#lblEBSavings_Q1").text("$" + ebSavingsQtrly.toString());
             $("#lblEBSavings_Q2").text("$" + ebSavingsQtrly.toString());
             $("#lblEBSavings_Q3").text("$" + ebSavingsQtrly.toString());
             $("#lblEBSavings_Q4").text("$" + ebSavingsQtrly.toString());

I tried to refactor using each and contains like the following line,

$("#fld_ROICalcOutput > span").contains("lblEBSavings").each().text("$" + ebSavingsQtrly.toString());

Where #fld_ROICalcOutput is the parent fieldset element of the table. Where am I going wrong here and is there a better way to express what I am trying to accomplish here.

Arun P Johny · Accepted Answer · 2013-09-20T08:39:47.753

2

I think what you are targeting are the span elements with class lblEBSavings, in that case where is no need to use .each()

$('.labelValueCalc[id^="lblEBSavings"]').text("$" + ebSavingsQtrly.toString())

edited Sep 20 '13 at 08:39

answered Sep 20 '13 at 08:31

Arun P Johny

384,651
66
527
531

no there are dozens of other labels with the same class. these four are identifiable only by the subset of their id's that I am using in the contains which I now see as the culprit as the developer tools are saying that there is no method contains in that context. How can I filter out the span tags that only have that subset of text I have in the .contains? – dinotom Sep 20 '13 at 08:37

score 0 · Answer 2 · answered Sep 20 '13 at 08:30

0

Try using the each function as following:

$.each($("#fld_ROICalcOutput > span").contains("lblEBSavings"), function(){
   $(this).text("$" + ebSavingsQtrly.toString());
});

You should also try to console.log( $("#fld_ROICalcOutput > span").contains("lblEBSavings") ); to make sure that the selector works.

answered Sep 20 '13 at 08:30

Praxis Ashelin

5,137
2
20
46

Dark that doesnt work either and the developer tools are saying there is no .contains method which is the culprit. Any other solution on how to filter out those four labels by the subset text of their Id's? – dinotom Sep 20 '13 at 08:38
@dinotom Ah, you should have added that in your original question. You can use the following answer http://stackoverflow.com/a/3480785/2539335 on `$("#fld_ROICalcOutput > span").attr("id")` – Praxis Ashelin Sep 20 '13 at 09:11

anupam · Answer 3 · 2013-09-20T08:46:30.573

0

How about:

$("#fld_ROICalcOutput[id^=lblEBSavings]").each(function() {
   $(this).text("$" + ebSavingsQtrly.toString());
}

edited Sep 20 '13 at 08:46

answered Sep 20 '13 at 08:37

anupam

756
5
11

$.each($("#fld_ROICalcOutput[id^=lblLubeOilSavings] > span"), function () { $(this).text("$" + loSavingsQtrly.toString()); }); – dinotom Sep 20 '13 at 09:02

iterating with each and contains in jquery

3 Answers3