Блог

Главная - Вопросы по программированию - В div, содержащем как текст, так и HTML-элемент, как изменить только текст, а не элемент, используя jQuery?

В div, содержащем как текст, так и HTML-элемент, как изменить только текст, а не элемент, используя jQuery?

#javascript #jquery

#javascript #jquery

Вопрос:

Я использую плагин, который отображает «кнопку» в стиле div, html которой выглядит следующим образом:

 <div id="div-id">
  "Button Label"
  <input type="file" . . . >
</div>

Как мне динамически изменять текст «Метки кнопки» с помощью jQuery, оставляя входные данные нетронутыми?

Я пробовал использовать .text(), но это также заменяет ввод.

(Примечание: у меня нет контроля над HTML-кодом, который отображает плагин, поэтому я застрял с этой структурой).

Спасибо!

Комментарии:

1. есть ли у вас ссылка, и какой плагин вы используете

2. Используя плагин ajax fileuploader. Нет ссылки на мой собственный код, но пример на домашней странице плагина. valums.com/ajax-upload

Ответ №1:

Вот одно из решений. Сохраните дочерние элементы div, задайте текст, а затем добавьте к нему childrden обратно.

 var $children = $myDiv.children();
$myDiv.text("New Button Label").append($children);

Пример.

Ответ №2:

 $("#div-id").html(function(i,oldhtml){
    return oldhtml.replace("Button Label","New label");
});

Ответ №3:

Вы можете напрямую получить доступ к текстовому узлу в обычном javascript с помощью кода, подобного этому:

 function getFirstTextNode(el) {
    var children = el.childNodes;
    for (var i = 0; i < children.length; i  ) {
        if (children[i].nodeType == 3) {
            return(children[i]);
        }
    }
}

var textNode = getFirstTextNode(document.getElementById("div-id"));
textNode.nodeValue = "New Label ";

Ответ №4:

Вы можете перебирать каждый узел и искать текстовые узлы с соответствующим содержимым. После нахождения работайте только с этим узлом.

 function isTextNode(node) {
    return node.nodeType == 3;
}

function hasText(node, text) {
    return node.nodeValue.trim() == text;
}

var nodes = $("#root").contents().filter(function() { 
    return isTextNode(this) amp;amp; hasText(this, '"Button Label"');
});

nodes.replaceWith("New Label");

Вот пример.

Метки: , , , , ,