Клонирование дочерних элементов в списке одинаковых родителей
Добрый день.
Есть список вида: <div class="parent"> <div class="link"><a href="/page1.php" class="child">page1</a></div> <div class="inner"></div> </div> <div class="parent"> <div class="link"><a href="/page2.php" class="child">page2</a></div> <div class="inner"></div> </div> <div class="parent"> <div class="link"><a href="/page3.php" class="child">page3</a></div> <div class="inner"></div> </div> Нужно клонировать .child и поставить клон после .inner так что бы внутри первого .parent стоял клон .child, который находится внутри него. А внутри второго .parent стоял клон второго .child Пробовал так -
$(".link").parent().find("a.child").clone().appendTo(".link").parent();
Выводит все .child в каждый .parent Подскажите пожалуйста, как такое реализовать? |
emptyindorill,
здравствуйте, так нужно?
$(".link").each(function(){
$(this).parent().find("a.child").clone().appendTo($(this).parent())
})
|
Manyasha,
зачем, тогда так:
$('.parent').append(function() {
return $(this).children('.link').clone()
})
|
Спасибо большое, работает.
|
Цитата:
|
Спасибо большое.
|
Цитата:
Это решение одной очень хитрой задачи в Confluence. Нужно сделать что бы в списке новостей была кнопка читать далее и отображалась не полная новость. Но есть 3 но: - у меня нет доступа к основным скриптам движка, - в Confluence нет такого функуционала для макроса вывода новостей по умолчанию, - и третее - никто из ИТ не будет делать такое, и так же не будут искать-покупать-устанавливать-настраивать плагин расширяющий функционал модуля новостей потому что - и далее следует список из 100 причин. В общем, обычная картина в России - задачу нужно выполнить, но инструментов мы вам не дадим, ещё и по рукам бить будем, в случае неудачи - вина полностью на вас) (В данный момент делаю страницу библиотеки с возможностью добавления книг только через комментарии, потому что только комментарии можно лайкать, а лайки очень нужны в конечном варианте) |
emptyindorill,
это описание не поясняет клонирование ссылки. Есть ссылки, они доступны, после клонирования их будет каждой по 2 штуки, зачем? |
Цитата:
|
Цитата:
|
Цитата:
А имеющуюся ссылку кнопкой сделать нельзя, для неё у "дизайнера" другое исполнение. Увидев макет я сказал сразу - нет в функционале кнопки читать далее, и она и не нужна, потому что заголовок ссылка. Мне ответили - директор хочет так, и никак иначе. Заголовок не ссылкой и что бы было читать далее. Сам не рад что так приходится изгаляться. |
Цитата:
|
Цитата:
То что клон тоже является ссылкой из-заголовка то я понимаю. Я как то не подумал что можно просто взять href, в нужное место блока новости вставить .html() и в этот html вставить href из ссылки-заголовка) Но в принципе меня и нынешний вариант тоже устраивает. Строчка jquery, 2 строчки css и всё - желаемый результат достигнут. |
Цитата:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
.btn-link {
display: inline-block;
padding: 0 5px;
border: 1px solid #ddd;
border-radius: 3px;
background-color: #eee;
color: #aaa;
text-decoration: none;
}
.btn-link:hover {
color: #777;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function() {
$('div.parent').append(function() {
return $('<a>', {'href': $(this).find('a')[0].href, 'class': 'btn-link', 'text': 'Читать далее'})
})
});
</script>
</head>
<body>
<div class="parent">
<div class="link"><a href="/page1.php" class="child">page1</a></div>
<div class="inner">Content</div>
</div>
<div class="parent">
<div class="link"><a href="/page2.php" class="child">page2</a></div>
<div class="inner">Content</div>
</div>
<div class="parent">
<div class="link"><a href="/page3.php" class="child">page3</a></div>
<div class="inner">Content</div>
</div>
</body>
</html>
|
Цитата:
Спасибо за наставление) |
Цитата:
|
| Часовой пояс GMT +3, время: 13:11. |