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 и эти блоки с содержимым были скопированы в другое место сайта ? |
Похоже понедельник прошел и все стала на круги своя :)
Решение найдено:
<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>
Результат: Цитата:
Может кто знает как клонировать несколько идентификаторов сразу ? |
$("#ih, #ih1, #ih2").clone().addClass("newElement").appendTo("#clone");
|
Цитата:
Столкнулся ещё с небольшой проблемкой, пытаюсь взять текст с <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]" Подскажите плиз где ошибка ? |
|
|
Цитата:
|
Цитата:
Цитата:
Цитата:
Все просто :) Но почему то не работает. |
Цитата:
$("#donor");
Вот таким образом вы получите объект, а не его текст. Попытавшись вывести его (что, фактически и происходит) Вы получаете строчку "[object Object]". Для того чтобы найти "внутренности" полученного объекта надо воспользоваться функцией .text(), ссылка опять же дана выше (есть еще функция .html(), но сейчас она не нужна). Немного чтения документации и действительно будет все просто. И будет работать впридачу. |
Нашел ошибку свою, вообще не так функцию составил :)
Спасибо 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>
|
Цитата:
Спасибо уже разобрался |
Вопрос не закрыт :(
По мимо того что нужно было скопировать несколько <div> элементов с одной части странице в другую, нужно было некоторые из них изменить, а точнее изменить их class="" У меня получается не понятно что, если я не изменяю класс то <div> клонируется нормально, если изменяю его то часть <div> переноситься (т.е. вырезается со старого места и вставляется в новое) Пример кода:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function cloNeN() {
$("#top").clone() // сделаем копию элемента top
$("#ding").removeClass("nIn0", false) // удалит все классы у элемента с идентификатором ding
$("#ding").addClass("nIn01") // добавим этой копии класс nIn01
.appendTo("#clone"); // вставим измененный элемент в конец элемента clone
}
</script>
</head>
<body onload="cloNeN()">
<div id="top">
<div id="logo" class="logo">
<img src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif" alt="" style="cursor: prn;">
</div>
<div id="ding" class="nIn0">
<div id="ins" class="">
Logon
<span class="local">127 0 0 1</span>
</div>
</div>
</div>
</br>
<div id="clone"></div>
</body>
</html>
Помогите плиз, сломал голову но не чего не выходит, подозреваю что это из-за того что клонирую я <div id="top">, а класс меняю в дочернем диве. Потому что если не производить не каких манипуляций кроме клонирование то все нормально, может не верно составил функцию ? Люди добрые подскажите :( |
Что же вы делаете на самом деле:
1. Клонируете элемент с id = top, не предпринимая с ним никаких действий. 2. Берете элемент, отнимаете у него класс. Что тут значит второй параметр - непонятно. 3. Даете этому элементу новый класс и перемещаете в другой див. Может прежде чем писать что-то стоит в разобраться в тех кусках кода, который непонятно откуда взят? |
Цитата:
<div id="top"> в нем содержаться ещё дивы над которыми нужно произвести манипуляцию, но я не знаю как указать на них. Пробовал так указать: $("#ding") Но это не правильно, нужно как то указать что в диве id="top" находиться ещё один див с id="ding" над которым нужно произвести изменение. Вопрос в том как это указать ??? |
Не уверен, что изучение JS нужно начинать c jQuery.
.children() .find() |
Цитата:
Но возникла проблема при изменении класса с nIn0 на nIn01. По средствам .toggleClass("nIn0 nIn01") не получается сделать, т.к. в моей функции не могу указать идентификатор, т.е. написать вот так: $("#ding").toggleClass("nIn0 nIn01") ПОМОГИТЕ закончить функцию, чтоб в клонированных элементах менялся класс с nIn0 на nIn01. Спасибо.
<html>
<head>
<style type="text/css">
.nIn01 { color: "#FF0000" }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function cloNeN() {
$("#top").find("#logo, #ding, #ins") // Ищем идентификаторы #logo, #ding, #ins в элементе #top
.clone() // Клонируем найденые элементы
.toggleClass("nIn0 nIn01") // Заменяем в клоне класс .nIn0 на .nIn01
.appendTo("#clone"); // Вставим измененный элемент в конец элемента clone
}
</script>
</head>
<body onload="cloNeN()">
<div id="top">
<div id="logo" class="logo">
<img src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif" alt="" style="cursor: prn;">
</div>
<div id="ding" class="nIn0">
<div id="ins">
Logon
<span class="local">127 0 0 1</span>
</div>
</div>
</div>
</br>
<div id="clone"></div>
</body>
</html>
|
Люди помогите закончить функцию, не получается менять в клоне класс class="nIn0" на class="nIn01"
Как реализовать ? Помогите... |
| Часовой пояс GMT +3, время: 17:39. |