14.02.2012, 04:16
|
|
Профессор
|
|
Регистрация: 08.02.2012
Сообщений: 216
|
|
|
jQuery:append - Копировать блок <div>
И снова здрасти 
Не неделя выдалась, а одни баги) Ситуация такая, в HTML странице есть несколько <div> блоков, у каждого из них уникальный id.
Мне нужно взять эти блоки по id и поместить их в другую часть странице сайта. Подобное реализовано по средствам jQuery:append
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("p").append("<div id='info'>Hello</div>");
});
</script>
<style>p { background:yellow; }</style>
</head>
<body>
<p>I would like to say: </p>
</body>
</html>
Но тут нужно вставлять весь текст а не просто имя идентификатора id.
Подскажите как подправить чтоб можно было указать имя id и эти блоки с содержимым были скопированы в другое место сайта ? |
|
14.02.2012, 05:45
|
|
Профессор
|
|
Регистрация: 08.02.2012
Сообщений: 216
|
|
Похоже понедельник прошел и все стала на круги своя
Решение найдено:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function cloNeN() {
$("#container").clone() // сделаем копию элемента Привет, Пока, Привет
.addClass("newElement") // добавим этой копии класс newElement
.appendTo("#clone"); // вставим измененный элемент в конец элемента clone
}
</script>
</head>
<body onload="cloNeN()">
<div id="container">
<div id="ih" class="hello">Привет</div>
<div id="ih1" class="goodbye">Пока</div>
<div id="ih2" class="hello">Привет</div>
</div>
</br>
<div id="clone"></div>
</body>
</html>
Результат:
|
Цитата:
|
<div id="clone"><div id="container" class="newElement">
<div class="hello" id="ih">Привет</div>
<div class="goodbye" id="ih1">Пока</div>
<div class="hello" id="ih2">Привет</div>
</div></div>
|
НО у меня не получилось клонировать несколько <div> сразу, т.е. я хотел клонировать <div> с идентификаторами id="ih", id="ih1", id="ih2" НО почему то не чего не вышло, поэтому и пришлось клонировать id="container"
Может кто знает как клонировать несколько идентификаторов сразу ?
|
|
14.02.2012, 06:56
|
|
Аспирант
|
|
Регистрация: 27.12.2011
Сообщений: 90
|
|
$("#ih, #ih1, #ih2").clone().addClass("newElement").appendTo("#clone");
|
|
14.02.2012, 12:27
|
|
Профессор
|
|
Регистрация: 08.02.2012
Сообщений: 216
|
|
Сообщение от skfyann
|
$("#ih, #ih1, #ih2").clone().addClass("newElement").appendTo("#clone");
|
Cпасибо
Столкнулся ещё с небольшой проблемкой, пытаюсь взять текст с <div id="donor">Test Clone</div> и клонировать его в значения value="" т.е. чтоб получилось value="Test Clone"
Вот как реализовываю:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function cloNeN() {
$("#clonevalue").attr({value: "", value: $("#donor")});
}
</script>
</head>
<body onload="cloNeN()">
<div id="donor">Test Clone</div>
</br>
<input type="text" id="clonevalue" value="">
</body>
</html>
Но результат выходит такой: value="[object Object]"
Подскажите плиз где ошибка ? |
|
14.02.2012, 13:13
|
|
Аспирант
|
|
Регистрация: 27.12.2011
Сообщений: 90
|
|
$("#clonevalue").attr({value: "", value: $("#donor")});
И как это по вашему должно работать?
Скорее всего понадобится .val() и .text(), если я правильно понял что нужно. |
|
14.02.2012, 13:15
|
|
Профессор
|
|
Регистрация: 08.02.2012
Сообщений: 216
|
|
|
Сообщение от skfyann
|
$("#clonevalue").attr({value: "", value: $("#donor")});
И как это по вашему должно работать?
Скорее всего понадобится .val() и .text(), если я правильно понял что нужно.
|
ммм, что то не пойму, как тогда составить функцию ? |
|
14.02.2012, 13:25
|
|
Аспирант
|
|
Регистрация: 27.12.2011
Сообщений: 90
|
|
|
Сообщение от lamer
|
|
ммм, что то не пойму, как тогда составить функцию ?
|
1. Не, я второе решение подряд писать не буду. Вы не ответили на вопрос, что же должно происходить по тому куску кода, который я приводил. А если Вы не хотите разбираться, то так дело не пойдет.  |
|
14.02.2012, 13:39
|
|
Профессор
|
|
Регистрация: 08.02.2012
Сообщений: 216
|
|
|
Сообщение от skfyann
|
|
1. Не, я второе решение подряд писать не буду. Вы не ответили на вопрос, что же должно происходить по тому куску кода, который я приводил. А если Вы не хотите разбираться, то так дело не пойдет.
|
По коду я все сразу написал:
|
Цитата:
|
|
Пытаюсь взять текст с <div id="donor">Test Clone</div> и клонировать его в значения value="" т.е. чтоб получилось value="Test Clone"
|
На счет кода как должен работать
|
Сообщение от skfyann
|
$("#clonevalue").attr({value: "", value: $("#donor")});
И как это по вашему должно работать?
Скорее всего понадобится .val() и .text(), если я правильно понял что нужно.
|
Находит id="clonevalue" делает значение value="" пустым и заполняет его текстом который берет с id="donor"
Все просто Но почему то не работает. |
|
14.02.2012, 14:05
|
|
Аспирант
|
|
Регистрация: 27.12.2011
Сообщений: 90
|
|
|
Сообщение от lamer
|
|
Находит id="clonevalue" делает значение value="" пустым.
|
Посмотрите что такое .val() и как он работает. Ссылка была выше.
$("#donor");
Вот таким образом вы получите объект, а не его текст. Попытавшись вывести его (что, фактически и происходит) Вы получаете строчку "[object Object]". Для того чтобы найти "внутренности" полученного объекта надо воспользоваться функцией .text(), ссылка опять же дана выше (есть еще функция .html(), но сейчас она не нужна).
Немного чтения документации и действительно будет все просто. И будет работать впридачу. |
|
14.02.2012, 14:06
|
|
Профессор
|
|
Регистрация: 08.02.2012
Сообщений: 216
|
|
Нашел ошибку свою, вообще не так функцию составил
Спасибо skfyann за наводку.
Собственно решение:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function cloNeN() {
var text = $("#donor").text();
$("#clonevalue").val(text);
}
</script>
</head>
<body onload="cloNeN()">
<div id="donor">Test Clone</div>
</br>
<input type="text" id="clonevalue" value="">
</body>
</html>
|
|
|
|
