jQuery: замените исходные данные промежутками
Я пытаюсь заменить исходные данные промежутками, содержащими входные значения таким способом как, чтобы смочь переключить их назад после нажатия кнопки. Я полагаю, что это было бы наиболее легко сделано на двух этапах - добавление <span>[input value]</span> перед исходными данными и затем сокрытием исходных данных. Единственная проблема, я испытываю затруднения из-за первой части. Я пробую вещи как
$('#container').find('input')
.parent()
.prepend('<span></span>') // this effectively creates: <span></span><input value=____>
Однако в предварительно ожидать $ оператора (это), кажется, не определено, таким образом, я не могу сделать
.prepend('<span>'+$(this).children('input').val()+'</span>')
С тех пор существует несколько исходных данных, я не могу просто поместить входное значение в переменную. Как я сделал бы это?
2 ответа
Для обновленного вопроса:
Вы можете сделать что-то вроде этого (основываясь на комментариях, редактирование для каждой строки):
$('input', context).each(function() {
$("<span />", { text: this.value, "class":"view" }).insertAfter(this);
$(this).hide();
});
Для исходного вопроса:
Вы захотите использовать .replaceWith () для этого:
$('#container').find('input').each(function() {
$(this).replaceWith("<span>" + this.value + "</span>");
});
.each () создает закрытие, в котором this относится к элементу ввода, поэтому вы можете использовать, например, this.value .
Чтобы убедиться в правильности кодирования, немного расширите его, чтобы использовать .text () , например:
$('#container').find('input').each(function() {
$(this).replaceWith($("<span />").text(this.value));
});
Мне кажется, что самым простым решением было бы изменить входные данные только для чтения и удалить границу (и, возможно, изменить цвет фона, в зависимости от вашего пользовательского интерфейса), что, по сути, заставляет их выглядеть как обычные этикетка.
function spanify() {
$('#container input')
.attr("readonly", "readonly")
.css("borderWidth", "0");
}
function despanify() {
$('#container input')
.removeAttr("readonly")
.css("borderWidth", "auto");
}
Возможно ли это?