I have a page with a number of dynamically generated links (through Liquid, it's a Shopify site) and they all have the same class. Each link is associated with another link (an image) and I'd like to apply the href attribute of each link to its associated second link.
I imagine I need to pull them all into an array object, then distribute them in the same order, but I'm lost. Any suggestions?
An example in HTML would be:
<a class="initial-link" href="http://some-link-1"></a>
<a href="" class="empty-link"><img src="" alt=""></a>
<a class="initial-link" href="http://some-link-2"></a>
<a href="" class="empty-link"><img src="" alt=""></a>
<a class="initial-link" href="http://some-link-3"></a>
<a href="" class="empty-link"><img src="" alt=""></a>
<a class="initial-link" href="http://some-link-4"></a>
<a href="" class="empty-link"><img src="" alt=""></a>
<a class="initial-link" href="http://some-link-5"></a>
<a href="" class="empty-link"><img src="" alt=""></a>
Basically, I want to grab the href value of each .initial-link and apply them to their corresponding .empty-link href.
Thanks
Do a loop, select the next element using next() use attr() to get and append the url
<a class="initial-link" href="http://some-link-1"></a>
<a href="" class="empty-link"><img src="" alt=""></a>
<a class="initial-link" href="http://some-link-2"></a>
<a href="" class="empty-link"><img src="" alt=""></a>
<a class="initial-link" href="http://some-link-3"></a>
<a href="" class="empty-link"><img src="" alt=""></a>
<a class="initial-link" href="http://some-link-4"></a>
<a href="" class="empty-link"><img src="" alt=""></a>
<a class="initial-link" href="http://some-link-5"></a>
<a href="" class="empty-link"><img src="" alt=""></a>
js:
$(document).ready(function(){
$('.initial-link').each(function(){
var href = $(this).attr('href');
$(this).next().attr('href',href);
});
})
demo:
$(document).ready(function() {
$('.initial-link').each(function() {
var href = $(this).attr('href');
$(this).next().attr('href', href);
});
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="initial-link" href="http://some-link-1">1</a>
<a href="" class="empty-link">e1
<img src="" alt="">
</a>
<a class="initial-link" href="http://some-link-2">2</a>
<a href="" class="empty-link">e2
<img src="" alt="">
</a>
<a class="initial-link" href="http://some-link-3">3</a>
<a href="" class="empty-link">e3
<img src="" alt="">
</a>
<a class="initial-link" href="http://some-link-4">4</a>
<a href="" class="empty-link">e4
<img src="" alt="">
</a>
<a class="initial-link" href="http://some-link-5">5</a>
<a href="" class="empty-link">e5
<img src="" alt="">
</a>or loop over the empty link and select the href of the previous link (initial-link) using prev() and attr():
$(document).ready(function(){
$('.empty-link').each(function(){
var href = $(this).prev().attr('href');
$(this).attr('href',href);
});
})
demo:
$(document).ready(function(){
$('.empty-link').each(function(){
var href = $(this).prev().attr('href');
$(this).attr('href',href);
});
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="initial-link" href="http://some-link-1">1</a>
<a href="" class="empty-link">e1
<img src="" alt="">
</a>
<a class="initial-link" href="http://some-link-2">2</a>
<a href="" class="empty-link">e2
<img src="" alt="">
</a>
<a class="initial-link" href="http://some-link-3">3</a>
<a href="" class="empty-link">e3
<img src="" alt="">
</a>
<a class="initial-link" href="http://some-link-4">4</a>
<a href="" class="empty-link">e4
<img src="" alt="">
</a>
<a class="initial-link" href="http://some-link-5">5</a>
<a href="" class="empty-link">e5
<img src="" alt="">
</a>Note:: remove the empty href from the initial-link you already have a href attribute