I am trying to find a way to copy the href from the data-name="entity_field_post_title"
div, and use it as the href of data-type="image"
div
The goal behind this is to open the corresponding link of the page instead of opening it's photos. These are miniatures of posts, and I would like to open the post themselves, not the photos.
Important to point out that the top div's ID
number changes each time unpredictably.
<div id="drts-content-post-1163">
<div class="drts-display-element-columns-3">
<div class="drts-row drts-gutter-none">
<div class="slick-list draggable">
<div class="slick-track">
<div data-type="image" class="slick-slide">
<a href="http://localhost/wp/wp-content/uploads/horse.jpeg" ><figure><img src="http://localhost/wp/wp-content/uploads/horse.jpeg"></figure></a>
</div>
<div data-type="image" class="slick-slide">
<a href="http://localhost/wp/wp-content/uploads/panda.png" ><figure><img src="http://localhost/wp/wp-content/uploads/panda.png"></figure></a>
</div>
</div>
</div>
</div>
<div data-name="column" class="drts-display-element-column-6">
<div class="drts-row drts-gutter-none">
<div data-name="entity_field_post_title" class="directory-listing-title ">
<a href="http://localhost/wp/anuncios/prueba-desde-backend-1/" target="_self" class="drts-entity-1163">TEXT</a>
</div>
</div>
</div>
</div>
</div>
I've left the selectors as variables just in case you need to make minor changes to those, but the base works - Looping through every containerDiv
, getting the href from linkDiv > <a>
, and applying that link to every imageDiv > <a>
let containerDiv = 'div[id*="drts-content-post-"]';
let linkDiv = 'div[data-name="entity_field_post_title"]';
let imageDiv = 'div[data-type="image"]';
let $container = $(containerDiv).has(linkDiv);
$container.each((index, element) => {
let link = $(element).find(`${linkDiv} > a`).attr('href');
$(element).find(`${imageDiv} > a`).attr('href', link);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="drts-content-post-1163">
<div class="drts-display-element-columns-3">
<div class="drts-row drts-gutter-none">
<div class="slick-list draggable">
<div class="slick-track">
<div data-type="image" class="slick-slide">
<a href="http://localhost/wp/wp-content/uploads/horse.jpeg" ><figure><img src="http://localhost/wp/wp-content/uploads/horse.jpeg"></figure></a>
</div>
<div data-type="image" class="slick-slide">
<a href="http://localhost/wp/wp-content/uploads/panda.png" ><figure><img src="http://localhost/wp/wp-content/uploads/panda.png"></figure></a>
</div>
</div>
</div>
</div>
<div data-name="column" class="drts-display-element-column-6">
<div class="drts-row drts-gutter-none">
<div data-name="entity_field_post_title" class="directory-listing-title ">
<a href="http://localhost/wp/anuncios/prueba-desde-backend-1/" target="_self" class="drts-entity-1163">TEXT</a>
</div>
</div>
</div>
</div>
</div>