jquery - 在输入字段后更改文本

Question

如何在不丢失输入字段的情况下将“2 年订阅”更改为“2 年：”

<div class="radioOption subscription1Col3">
<input class="buyNow" type="radio" name="product2" value="6_0" checked="">2 Year Subscription</div>

Answer 1

这相对简单，我建议以下（尽管目前未经测试）：

var input = $('.radioOption.subscription1Col3 input'),
    text = input[0].nextSibling.nodeValue,
    newText = text.replace(/ subscription/i,': ');
input[0].nextSibling.nodeValue = newText;

JS 小提琴演示。

或者可能更喜欢这个版本，因为它将调整后的文本包裹在一个label元素中，这有助于 UI 并使将来更容易定位该文本内容：

var input = $('#inputID'),
    label = $('<label />',{'for' : 'inputID'})
    .text(input[0].nextSibling.nodeValue.replace(/ Subscription/i,': '));
input.parent().empty().append(input, label);

JS 小提琴演示。

但是，这确实需要input具有id属性，以便在label语义上附加到input。

Answer 2

另一种方法是改变textContent

$('.buyNow')[0].nextSibling.textContent = "New Content"

Answer 3

jQuery doesn't support accessing text nodes, only elements, so you would need to use the DOM methods in Javascript to access the text node:

var nodes = $('.radioOption')[0].childNodes;
nodes[nodes.length-1].nodeValue= '2 Year';

Demo: http://jsfiddle.net/Guffa/PDqQW/

If you put an element around the text:

<div class="radioOption subscription1Col3">
  <input class="buyNow" type="radio" name="product2" value="6_0" checked="">
  <span>2 Year Subscription</span>
</div>

Then you can use just jQuery to access it:

$('.radioOption span').text('2 Year');

Demo: http://jsfiddle.net/Guffa/tRdYa/