У меня проблемы с нахождением головы над тем, что должно быть простым решением. Я хочу заменить текст в теге метки, не затрагивая других «братьев и сестер», если они существуют.
Пример разметки:
<fieldset class="myFieldsetClass">
<legend>Sample Fieldset</legend>
<ol>
<li>
<label>
<span class="marker">*</span>
Some Label 1
</label>
</li>
<li>
<label>
Some Label 2
</label>
</li>
<li>
<label>
Text that doesn't match...
</label>
</li>
</ol>
</fieldset>
Цель:
- Заменить текст
Some Label X
на Some Label
(т.е. удалить X
из текста метки).
- span внутри метки должны оставаться неизменными, если они существуют, например
<span class="marker">
выше.
- Я не знаю значение
X
, которое может быть длиной 1 или более символов.
Текущий сценарий:
Мой скрипт jQuery ниже работает, но я знаю, что он очень неэффективен. По какой-то причине я не могу обернуться вокруг этого ...
//for each label in the fieldset that contains text "Some Label "
$(".myFieldsetClass label:contains('Some Label ')").each(function() {
if ($(this).has("span").length > 0) {
//if the label has the span tag within, remove it and prepend it back to the replaced text
$(this).find("span").remove().prependTo($(this).text(labelText));
}
else {
//otherwise just replace the text
$(this).text('Some Label');
}
});
Сначала я подумал, что могу просто сделать:
$(".myFieldsetClass label:contains('Some Label ')").text("Some Label");
Но это очищает все содержимое метки и, следовательно, удаляет интервал, который я не хочу. Я не могу использовать функции замены для замены Some Label X
на Some Label
, потому что я не знаю, что будет X
.
Кто-нибудь может предложить более элегантный / эффективный подход к этой проблеме?
Спасибо.
EDIT
После попытки нескольких ответов, я думаю, что проблема, кажется, в том, что даже если я выберу правильную коллекцию, они будут текстовыми узлами, которые jquery не хочет изменять. Я использовал FireBug, чтобы выбрать коллекцию (многие ответы ниже всех выбираются правильно, но немного по-разному). В консоли Firebug результирующий набор:
[<TextNode textContent="Some Label 1:">,
<TextNode textContent="Some Label 2:">,
<TextNode textContent="Some Label 3:">,
<TextNode textContent="Some Label 4:">,
<TextNode textContent="Some Label 5:">]
Кажется, проблема в том, что вызовы .replaceWith (), .replace (), .text () и т. Д., По-видимому, не влияют на коллекцию jquery. Если я позволю вышеупомянутой коллекции содержать один из диапазонов, то вызовы .replaceWith (), .replace () и т. Д. Будут корректно работать с диапазоном, но текстовые узлы останутся такими, как есть.