CODEWITHSUNDEEP
javascriptjqueryhtml
Matt W.
Matt W.

Reputation: 84

Clone All Children Links HREF attributes to Another DIVs Links?

I've tried something like the following, but I'm not iterating properly over each and replacing each attribute accordingly?

HTML:

<div class="links">
<a href="#1">link A</a>
<a href="#2">link B</a>

</div>
<div class="links-result">
<a href="REPLACE WITH #1">link C</a>
<a href="REPLACE WITH #2">link D</a>
</div>

JQUERY:

$(document).ready(function() {
$('.links > a').each(function() {
    var link = $(this).nextAll('a').attr('href');
        $('.links-result').find('a').attr('href', link);

});

});

I'm hoping to clone all of the Link attributes for each 'a' from .links to each 'a' in .links-result for each.

Fiddle Here: What I've Tried

Upvotes: 0

Views: 34

Answers (1)

Nick
Nick

Reputation: 147206

You can make lists of each set of links, and then using $.each, iterate over the first list and use the index of the entry to write into the second list:

$(document).ready(function() {
    let links = $('.links > a');
    let newlinks = $('.links-result > a');
    links.each(function(index) {
        let lnk = $(this).attr('href');
        $(newlinks[index]).attr('href', lnk);
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="links">
<a href="#1">link A</a>
<a href="#2">link B</a>

</div>
<div class="links-result">
<a href="REPLACE WITH #1">link C</a>
<a href="REPLACE WITH #2">link D</a>
</div>

Upvotes: 1

Related Questions