jQuery.next на текстовом отрывке без селектора
Вот некоторый пример кода:
<input type="checkbox" id="send-notice" name="send-notice" value="1" /> This is a notice to all users.
<label for="subject">Subject</label>
Я хочу смочь выбрать текст, "Это - уведомление всем пользователям". таким образом, я могу удалить его.
Я не уверен, как сделать так все же.
Я попытался использовать jQuery('#send-notice').next(), но это выбирает <label for="subject"> блок.
Я также пытался перенести a <div> вокруг текстового использования jQuery('#send-notice').after() и закрытие </div> наклеить jQuery("label[for='subject']").before(). Но jQuery не нравятся нераскрытые элементы.
Какая-либо справка здесь?
2 ответа
Вы хотите работать с текстовыми узлами, а jQuery избегает текстовых узлов. Поскольку вы не можете обернуть текст, который хотите изменить, в промежуток или что-то в этом роде, вы можете с некоторыми усилиями идентифицировать текстовые узлы и выполнить некоторую операцию. Это делается быстро, но, похоже, работает:
/* utility function to help us skip whitespace-only nodes */
function isWhitespace( thenode ) {
return !(/[^\t\n\r ]/.test( thenode.data ));
}
/* attach this function to ready() or other trigger */
function fixtext(){
$('div#main')
.contents()
.filter( function() {
return !isWhitespace(this) && this.nodeType == 3;
// nodeType 3 means textNode. Force jQuery to ingest.
})
.each( function(){
$(this).replaceWith( document.createTextNode('Your new text') );
});
}
Это, безусловно, можно уменьшить и упростить, но, похоже, он работает с использованием информации в вашем вопросе и должен дать вам отправную точку в подходе. Он не полагается на точное соответствие вашей строки - просто строка будет расположена в каком-то более крупном контейнере (у меня это как div # main здесь), и в ней не будет никаких пробелов. братья и сестры. Даже если ваш случай более сложный, пока текст размещен последовательно, вы сможете идентифицировать его с помощью функции filter () .
jQuery здесь не слишком поможет, поскольку его сила в обходе DOM, а у вас нет узла, к которому он мог бы перейти.
Я подозреваю, что лучшее, что вы можете сделать, это что-то вроде...
var html = $('#parent-element').html();
html = html.replace("This is a notice to all users", '');
$("#parent-element").html(html);
То есть: замена текста грубой силой. Если вам нужна небольшая защита от изменения текста, можно воспользоваться простым сопоставлением шаблонов.
var html = $('#parent-element').html();
html = html.replace(/<input type="checkbox" id="send-notice" name="send-notice" value="1" />.*?</, '');
$("#parent-element").html(html);