Jquery add after

I would like to use JQuery to add a dollar sign in front of the price field on the product pages of this site, here is an example:
http://harbisondevelopment.info/ume-blossom

The html in front of the actual price is:
<div class="field-label">Price:&nbsp;</div><div class="field-items"><div class="field-item even">
but the price is different for each sword, so I can't use the before function. I can't seem to get the code to work. I tried:
$('.field field-name-field-price field-type-text field-label-above').after($('$'));
You can see there are other divs after that one and they are repeated several times on the page. Is there a way to stack the divs (which as nested) so the $ is added to the right place?
Maybe I should just be using javascript?
LVL 17
nanharbisonAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
Ishaan RawatConnect With a Mentor Designer | Developer | ProgrammerCommented:
Or you can do that by css also...

.field.field-name-field-price.field-type-text.field-label-above .field-item.even:before {
content: "$ ";
}

Open in new window


I Checked It...


and IT WORKED/..
0
 
Aaron FeledyDrupal Developer and ConsultantCommented:
It might be easier to try doing it with a module...
This one should do the trick:
https://drupal.org/project/simple_field_formatter
0
 
nanharbisonAuthor Commented:
Arrow_1 - I installed this module, but can't figure out how to get at it. I need it on a content type that I have created so the company can add swords for sale without using me. This module is not on the configure page and it isn't available when creating new content on a basic page. There is no link to configure it on the modules page.
0
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

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.

 
Aaron FeledyDrupal Developer and ConsultantCommented:
I believe you use it by going to the display settings page for your content type. You should then be able to configure the format settings for the specific field to display a dollar sign prefix.
0
 
Ishaan RawatDesigner | Developer | ProgrammerCommented:
Try this...

$(document).ready(function() {
       $(".field-label").sibling(".field-items").children(".field-item.even").append("&#36;");
});

Open in new window


or

$(document).ready(function() {
       $(".field-items").children(".field-item.even").append("&#36;");
});

Open in new window

0
 
nanharbisonAuthor Commented:
@Arrow_1:
I found it, added the $ and it doesn't show, it's not even in the html when I look at the code.

shaanRawat:
The first one doesn't work, the second one adds several $'s to every field-items div, which is many. Somehow the JQuery has to include the classes:
field field-name-field-price field-type-text field-label-above
so that it is only put in front of the price field item
0
 
Julian HansenCommented:
As a matter of interest why are you adding the dollar sign with JQuery and not in the page itself?
0
 
Ishaan RawatDesigner | Developer | ProgrammerCommented:
try this...
$(document).ready(function() {
       $(".field-items > .field-item.even").append("&#36;");
});

Open in new window

0
 
nanharbisonAuthor Commented:
@ julianH: I need the price to be a number so it can get kicked over to be bought through Paypal, and this site is done in Drupal using a custom content type, so I can't just add it to the page.

@IshaanRawat - that doesn't work. As I said, just the div with the price has to have this, all of the fields are called field-items and half of them are field-item-even.
0
 
Ishaan RawatDesigner | Developer | ProgrammerCommented:
OK... As your wish...

$(document).ready(function() {
       $(".field.field-name-field-price.field-type-text.field-label-above").find(".field-item.even").append("&#36;");
});

Open in new window

0
 
nanharbisonAuthor Commented:
I thought I could add the dollar sign in front of the price on the manage display, there is usually a place to add some content before or after the content of the field, but it isn't there. I might be thinking about the web form.
0
 
Aaron FeledyDrupal Developer and ConsultantCommented:
Not sure about that module. I've never actually used it. For the jQuery solution, I've modified IshaanRawat's code for your specific case.

As a prefix:
$(document).ready(function() {
       $(".field-name-field-price .field-items").children(".field-item").prepend("&#36;");
});

Open in new window


As a suffix:
$(document).ready(function() {
       $(".field-name-field-price .field-items").children(".field-item").append("&#36;");
});

Open in new window


Tested it myself and it worked.
0
 
nanharbisonAuthor Commented:
Thanks this works, when I tried the ascii characters in the CSS I got the ascii characters. Thanks for suggesting this, as much as I know about CSS, I didn't know I could do this in CSS.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.