jQuery.next в текстовом фрагменте без селектора

Question

Вот пример кода:

<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">.

Я также попытался обернуть <div> вокруг текста, используя jQuery('#send-notice').after() и закрывающий тег </div> на jQuery("label[for='subject']").before(). Но jQuery не любит неоткрытых элементов.

Любая помощь здесь?

Answer 1

Вы хотите работать с текстовыми узлами, а 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().

Answer 2

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);