Как я могу получить, манипулировать и заменить текстовый узел, используя jQuery?

Question

Вот мой код:

<li class="det_price">
    <a href="/designer/customize/278258?dpid=1">Printing</a> from $10 
</li>

У меня есть около пятнадцати кусков, подобных этому, на любой странице, и я хотел бы взять текстовый узел (из $ X), выбрать X с помощью регулярного выражения и установить его в числовую переменную, а затем умножить на %, и добавьте его к исходному узлу. Например, если исходный узел сказал «от 10 долларов», я бы хотел заменить его на «от 10 долларов до 2,60 долларов». Я могу сделать это с помощью replace () и регулярных выражений на одном узле, но у меня возникают проблемы с их повторением с помощью jQuery. Могу ли я применить такое преобразование к объекту jQuery или мне нужно как-то преобразовать его, а затем использовать стандартные функции Javascript?

Спасибо!

Answer 1

Вот как выбрать текстовый узел.

Вот (скелет), что вы делаете, когда получите их:

$('li.det_price').contents().filter(function()
{ 
    return this.nodeType == 3;
}).text(function (i, text)
{
    return text.replace(/* your schtuff here */);
});

---

Так что, очевидно, jQuery не очень хорошо работает с текстовыми узлами

Пора (немного) взломать:

var rnotwhite = /\S/; // to omit text nodes that are solely white space
                      // tweak this as needed
$('li.det_price').contents().filter(function()
{ 
    return this.nodeType === 3 && rnotwhite.test($(this).text());
}).text(function (i, text)
{
    this.replaceWholeText(text + ' replaced');
    // or, for more cross-browser-ness
    // this.nodeValue = text + ' replaced';
});

--> Посмотри это сладкое демо <--

--> IE-совместимая демоверсия здесь <--

Теперь сделка: если у вас есть контроль над разметкой, лучшее решение для этого заключается в том, чтобы обернуть текстовые узлы, которые вам действительно интересны, в <span> с, как это:

<li class="det_price">
  <a href="/designer/customize/278258?dpid=1">Printing</a><span> from $10</span>
</li>

и тогда вы можете просто сделать это ( way less sketch, IMO):

$('li.det_price > a + span').text(function (i, text)
{
    return text + ' replaced';
});

--> Больше демо-совершенства <--

Answer 2

$("li.det_price a").text() даст вам текст этой LI (и, к сожалению, всех узлов LI с этой ссылкой на класс).Чтобы получить только текст этой конкретной LI, вам нужно дать ему идентификатор или найти какой-то другой способ идентифицировать его уникально.

Как только вы определите его уникально, вы можете просто вставить строку в.text () фигурные скобки, чтобы изменить то, что у вас было.Например,

$("li.det_price a").text('Not Printing') изменит текст выше с «Печать» на «Не печатать».

Answer 3

Вам необходимо использовать каждая функция:

$("li.det_price a").each(function(index, Element){
   //Element holds the current anchor, manipulate it's contents at will
   $("Element").val("some new value...");
})