使用jquery

Question

如果我要从每年添加标签到文本结尾，那么跨度内的这个文本是由php生成的。我不知道如何定位文本字符串以启动jquery。

<!-- input: -->
<span class="price">RM1,088.00 Annually + RM10.00 Setup Fee (Free Domain)</span>

<!-- output: --> 
<span class="price">
  RM1,088.00 
  <small>Annually + RM10.00 Setup Fee (Free Domain)</small>
</span>

Answer 1

这里最好的解决方案是修改PHP代码生成的输出。

如果那是不可能的话，假设生成的字符串中的价格格式始终相同，您可以按空格分割文本以创建数组并分离出值。试试这个：

$('.price').html(function() {
  var values = $(this).text().trim().split(' ');
  return values.shift() + '<small>' + values.join(' ') + '</small>';
});

span small { 
  display: block;
  color: red; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="price">RM1,088.00 Annually + RM10.00 Setup Fee (Free Domain)</span>
<span class="price">RM2,090,082.00 Annually + RM25.00 Setup Fee (Free Domain)</span>

Answer 2

您可以使用Text#splitText将文本节点拆分为两个，此时第二个可以使用jQuery轻松打包：

$('.price').contents().each(function () {
  $(this.splitText(this.data.indexOf("Annually"))).wrap('<small>')
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- input: -->
<span class="price">RM1,088.00 Annually + RM10.00 Setup Fee (Free Domain)</span>

Answer 3

我想你可能想看一个jQuery wrapInner。

$.pjax.reload({container: "#pjax-id"});

将使用链接包装任何sup的文本。

http://api.jquery.com/wrapInner/

Answer 4

我想你想要这个...

$(function(){
  var text = $(".price").text();
  text = text.split("+");
  console.log(text[0] + text[1]);
  
  $('.price').html(text[0] + "<small>" + text[1] + "</small>");
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="price">RM1,088.00 Annually + RM10.00 Setup Fee (Free Domain)</span>

Answer 5

您可以在第一个空格处轻松拆分，然后在第二个零件周围附上小标签，请参阅以下内容：

var firstPart = $(".price").text().substr(0,$(".price").text().indexOf(' '));
    var secondPart = $(".price").text().substr($(".price").text().indexOf(' ')+1);
    var result = firstPart + "<small>" + secondPart + "</small>";
    $(".price").html(result);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- input: -->
<span class="price">RM1,088.00 Annually + RM10.00 Setup Fee (Free Domain)</span>

我希望它可以帮助你，再见。