Javascript-форум - Клонирование дочерних элементов в списке одинаковых родителей

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Клонирование дочерних элементов в списке одинаковых родителей (https://javascript.ru/forum/jquery/69814-klonirovanie-dochernikh-ehlementov-v-spiske-odinakovykh-roditelejj.html)

Цитата:

Сообщение от laimas (Сообщение 459026)

А первая что будет имитировать? Вы же понимаете, что клон, это 100% близнец (о событиях и прочем опустим), кнопкой вторая ссылка не станет автоматически, и нафиг она нужна вообще, можно и имеющуюся ссылку превратить в кнопку.

Первая ничего не будет имитировать, первая заголовок, h4, ссылка внутри которого будет неактивна (pointer-event: none;), событий никаких и не надо, нужен именно клон ссылки заголовка что бы на основе его сделать то, чего изначально в системе нет.

А имеющуюся ссылку кнопкой сделать нельзя, для неё у "дизайнера" другое исполнение.

Увидев макет я сказал сразу - нет в функционале кнопки читать далее, и она и не нужна, потому что заголовок ссылка.
Мне ответили - директор хочет так, и никак иначе. Заголовок не ссылкой и что бы было читать далее.

Сам не рад что так приходится изгаляться.

Цитата:

Сообщение от emptyindorill

Первая ничего не будет имитировать, первая заголовок, h4

Вторая при клонировании тоже будет заголовком-ссылкой, это что до сих пор не понятно? Если требуется создать кнопку-ссылку, то нужно не клонировать блок со ссылкой-заголовком, а брать у этих ссылок только href, который указывать добавляемой (не клонируемой) ссылке, кнопкой которую можно превратить и в CSS.

Цитата:

Сообщение от laimas (Сообщение 459028)

Точно... Я понял что вы имеете ввиду)

То что клон тоже является ссылкой из-заголовка то я понимаю.

Я как то не подумал что можно просто взять href, в нужное место блока новости вставить .html() и в этот html вставить href из ссылки-заголовка)

Но в принципе меня и нынешний вариант тоже устраивает.
Строчка jquery, 2 строчки css и всё - желаемый результат достигнут.

Цитата:

Сообщение от emptyindorill

Но в принципе меня и нынешний вариант тоже устраивает

Думать надо, а не ..., клонирование здесь не к месту:

<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>

Цитата:

Сообщение от laimas (Сообщение 459032)

Думать надо, а не ..., клонирование здесь не к месту:

<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>

Понял Вас.

Спасибо за наставление)

Цитата:

Сообщение от emptyindorill

Понял Вас

Это хорошо, но не повод цитировать все, зачем создавать портянки. ;)