Question

我的HTML：

Get <span class="geo_currency">$</span>50 on your next order...

我已经根据地理位置覆盖货币（工作正常）但是对于一些货币我需要重新定位货币以便它在数字之后出现，如

50<span class="geo_currency">kr</span>

请注意：

- 如上所示的HTML是严格的;例如总是

<span class="geo_currency">$</span>someNumber

- 数字中的位数可以变化

- 数字之后总是有一个空格（我想这就是我们需要寻找的东西？）

很多 - 任何想法？

Answer 1

我知道这并不能完全回答你的问题，但也许你可以通过改变你的HTML来解决这个特殊问题：

Get <span class="geo_currency" data-currency="euro">50</span> on your next order.

小喜欢这样：

span.geo_currency {
    &[data-currency="euro"]:after {
        content: "€";
    }
    &[data-currency="dollar"]:before {
        content: "$";
    }
}

或者，对于纯粹主义者来说，这个CSS：

span.geo_currency[data-currency="euro"]:after {
    content: "€";
}
span.geo_currency[data-currency="dollar"]:before {
    content: "$";
}

Answer 2

您可以使用正则表达式执行此操作：例如

将KR50兑换为50KR

//assign the parent to make things a little readable
parent = $('span.geo_currency').parent();
//swap the span
parent.html(parent.html().replace(/(<span class="geo_currency">.*<\/span>)([\d\.\,]{1,20})/, '$2$1'));

将50KR换算为KR50

//assign the parent to make things a little readable
parent = $('span.geo_currency').parent();
//swap the span
parent.html(parent.html().replace(/([\d\.\,]{1,20})(<span class="geo_currency">.*<\/span>)/, '$2$1'));

<强>限制

我假设你的HTML有一个合适的父母，否则扫描DOM会很讨厌。
你的号码是花车，＆lt; 20个字符，只有一个点或逗号作为分隔符。
这不是一个句子，句号是一句话，例如有了它，你将获得KR50。

这是一个工作示例：http://jsfiddle.net/fEksT/

Answer 3

如果您确实希望通过JS来支持不喜欢:before和:after的浏览器，我已经设法找到了一种方法：

$(".geo_currency").each(function() {
    var indx = $(this).index();
    var textNode = $(this).parent().contents()[indx+2];
    var txt = textNode.textContent;
    var num = txt.match(/^[0-9]+/)[0];
    var newSpan = $("<span>").html(num).append($(this)).append(txt.substr(num.length));
    $(textNode).before(newSpan).remove();
    $(newSpan).get(0).outerHTML = $(newSpan).html();
});

JSFiddle

使用jQuery重定位元素

3 个答案: