Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

How do I change the contents of a <span> on the fly using jQuery each?

Posted on 2014-12-11
4
Medium Priority
?
278 Views
Last Modified: 2014-12-11
Hi all,

I have a bit of wordpress generated code that I would like to change on-the-fly.

The HTML code looks like this:

<div class="javo-item-price-table">
				<ul class="javo-price-item" style="height: 389px;">
				<li class="title">
					<h2>LIST YOUR BUSINESS - YEARLY SUBSCRIPTION</h2>
				</li>
				<li class="price">
					<span style="height: 123px;">
						The price for membership is <strong>£60.00 per Year</strong>. <br>Membership expires after 1 Year.					</span>
				</li>
				<li class="attribute"><span><i class="glyphicon glyphicon-pencil"></i> Item 1 posts</span></li><li class="attribute"><span><i class="glyphicon glyphicon-calendar"></i> Duration 365 days</span></li><li class="attribute disabled"><span><i class="glyphicon glyphicon-thumbs-up"></i> No Featured</span></li>				<li class="submit">
											<a class="pmpro_btn pmpro_btn-select" href="http://www.old-find.com/membership-account/membership-checkout/?level=1">More info</a>
									</li>
			</ul>
						<ul class="javo-price-item" style="height: 389px;">
				<li class="title">
					<h2>LIST YOUR EVENT - YEARLY SUBSCRIPTION</h2>
				</li>
				<li class="price">
					<span style="height: 123px;">
						The price for membership is <strong>£70.00 per Year</strong>. <br>Membership expires after 1 Year.					</span>
				</li>
				<li class="attribute"><span><i class="glyphicon glyphicon-pencil"></i> Item 1 posts</span></li><li class="attribute"><span><i class="glyphicon glyphicon-calendar"></i> Duration 365 days</span></li><li class="attribute disabled"><span><i class="glyphicon glyphicon-thumbs-up"></i> No Featured</span></li>				<li class="submit">
											<a class="pmpro_btn pmpro_btn-select" href="http://www.old-find.com/membership-account/membership-checkout/?level=2">More info</a>
									</li>
			</ul>
						<ul class="javo-price-item" style="height: 412px;">
				<li class="title">
					<h2>LIST YOUR BUSINESS - MONTHLY SUBSCRIPTION</h2>
				</li>
				<li class="price">
					<span style="height: 146px;">
						<strong>£6.00</strong> now and then <strong>£6.00 per Month for 11 more Months</strong>. <br>Membership expires after 12 Months.					</span>
				</li>
				<li class="attribute"><span><i class="glyphicon glyphicon-pencil"></i> Item 1 posts</span></li><li class="attribute"><span><i class="glyphicon glyphicon-calendar"></i> Duration 360 days</span></li><li class="attribute disabled"><span><i class="glyphicon glyphicon-thumbs-up"></i> No Featured</span></li>				<li class="submit">
											<a class="pmpro_btn pmpro_btn-select" href="http://www.old-find.com/membership-account/membership-checkout/?level=5">More info</a>
									</li>
			</ul>
						<ul class="javo-price-item" style="height: 412px;">
				<li class="title">
					<h2>LIST YOUR EVENT - MONTHLY SUBSCRIPTION</h2>
				</li>
				<li class="price">
					<span style="height: 146px;">
						<strong>£7.00</strong> now and then <strong>£7.00 per Month for 11 more Months</strong>. <br>Membership expires after 12 Months.					</span>
				</li>
				<li class="attribute"><span><i class="glyphicon glyphicon-pencil"></i> Item 1 posts</span></li><li class="attribute"><span><i class="glyphicon glyphicon-calendar"></i> Duration 360 days</span></li><li class="attribute disabled"><span><i class="glyphicon glyphicon-thumbs-up"></i> No Featured</span></li>				<li class="submit">
											<a class="pmpro_btn pmpro_btn-select" href="http://www.old-find.com/membership-account/membership-checkout/?level=6">More info</a>
									</li>
			</ul>
			</div>

Open in new window



There are two cases where I have strings that look similar:

<strong>£6.00</strong> now and then <strong>£6.00 per Month for 11 more Months</strong>. <br>Membership expires after 12 Months.

Open in new window

and
<strong>£7.00</strong> now and then <strong>£7.00 per Month for 11 more Months</strong>. <br>Membership expires after 12 Months.

Open in new window


I would like them to become:
<strong>£6.00 per month for 12 months</strong>. <br>Membership expires after 12 Months.

Open in new window

and
<strong>£7.00 per month for 12 months</strong>. <br>Membership expires after 12 Months.

Open in new window



Could I do this using a jQuery each function? (I've used the each function as in the future there might be more similar content generated by wordpress backend and I need this code to work even then on this pattern of content).

*************************************

MY PROGRESS SO FAR:
    var monthlySubText = [];
    jQuery("li.price span:contains(' now and then ')").each(function(index) { 
        monthlySubText.push(jQuery(this).closest("span").html());  //alert(monthlySubText[index]);
    });

Open in new window


I've stored the values of the two instances in an array but now I would like to modify the contents of that array and make changes to the html. Any other, better solution is welcome too.

Please assist. Thanks in advance.
0
Comment
Question by:badwolfff
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 60

Expert Comment

by:HainKurt
ID: 40495055
first it should be like this:

var monthlySubText = [];

$("ul .price span:contains(' now and then ')").each(function (index) {
    monthlySubText.push($(this).closest("span").html());
});

alert(monthlySubText);

Open in new window

0
 
LVL 60

Accepted Solution

by:
HainKurt earned 2000 total points
ID: 40495087
try this:

$("ul .price span:contains(' now and then ')").each(function (index) {
    var price = $("strong",$(this)).first().html();
    $(this).html("<strong>" + price + " per month for 12 months</strong>. <br>Membership expires after 12 Months.");
});

Open in new window


here to test
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40495089
Test page : http://jsfiddle.net/53a7gurc/

jQuery(function($) {
    $(".javo-price-item li.price span>strong")
    .filter(function() {
        return /^£\d[^.]*\.\d\d$/.test($(this).text());
    })
    .each(function(i, v) {
        var txt = $(this).text();
        $(this).parent().html("<strong>" + txt + " per month for 12 months</strong>. <br>Membership expires after 12 Months.");
    });
});

Open in new window

0
 

Author Comment

by:badwolfff
ID: 40495391
Thanks for the replies. Just an additional question guys.

This works BUT I would like the last part
. <br>Membership expires after 12 Months.
to be passed through a variable too and not typed out as a text string as now.

How could I modify my working jQuery solution to allow this? I need everything withing the span that is after the second </strong> to be saved into a variable and inserted at the end in the last line of the jQuery code. Something like:
$(this).parent().html("<strong>" + txt + " per month for 12 months</strong>" + endTxt);

Open in new window



thanks in advance

P.S. If you pefer to answer this same question for points, I have started a new thread for your benefit:
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/HTML/Q_28579424.html
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

610 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question